/* ============================================================
   CruiseCNTRL — Shared Site Stylesheet
   Single source of truth for tokens + shared utilities.
   Every public page links to this file.
   ============================================================ */

/* ── Tier 1: Primitives ── */
:root {
  /* Color: Flare (Electric Red-Orange) — Primary */
  --orange-50:  #FFF0EC;
  --orange-100: #FFDDD2;
  --orange-200: #FFB9A4;
  --orange-300: #FF9070;
  --orange-400: #FF6C48;
  --orange-500: #F24C2B;
  --orange-600: #D43E1C;
  --orange-700: #B32E12;
  --orange-800: #8C2008;
  --orange-900: #621402;
  --orange-950: #380A00;

  /* Color: Signal Static (Dusty Mauve) */
  --mauve-50:  #FAF6F8;
  --mauve-100: #F5EDF2;
  --mauve-200: #E8D8E2;
  --mauve-300: #D4B8CC;
  --mauve-400: #B892AE;
  --mauve-500: #96698C;
  --mauve-600: #7A4E70;
  --mauve-700: #5E3655;
  --mauve-800: #432240;
  --mauve-900: #2C1229;
  --mauve-950: #180A18;

  /* Color: Signal Fog (Desaturated Olive) */
  --olive-50:  #F7F8F2;
  --olive-100: #EFF1E4;
  --olive-200: #D9DECC;
  --olive-300: #BECAB0;
  --olive-400: #9BAE8C;
  --olive-500: #7A9268;
  --olive-600: #5E7850;
  --olive-700: #44602C;
  --olive-800: #2E4818;
  --olive-900: #1A2E08;
  --olive-950: #0C1A04;

  /* Color: Clarity Canvas (Warm Cream) */
  --cream-50:  #FFFDF9;
  --cream-100: #FFF9F0;
  --cream-200: #FFF4E4;
  --cream-300: #FFEECE;
  --cream-400: #FFE4B0;
  --cream-500: #F8D090;
  --cream-600: #ECBA6A;
  --cream-700: #D49E48;
  --cream-800: #B07C28;
  --cream-900: #7A5608;
  --cream-950: #4A3400;

  /* Color: Static Ground (Warm Near-Black) */
  --neutral-50:  #F8F5F2;
  --neutral-100: #EEE9E4;
  --neutral-200: #D8D0C8;
  --neutral-300: #B8AEA4;
  --neutral-400: #928680;
  --neutral-500: #6C6058;
  --neutral-600: #4E4440;
  --neutral-700: #362E2A;
  --neutral-800: #261E1C;
  --neutral-900: #1A1412;
  --neutral-950: #100C0A;

  /* Color: Semantic / Functional */
  --green-50:  #ECFDF5;
  --green-500: #1A7A4A;
  --green-700: #15613B;
  --yellow-50:  #FFFBEB;
  --yellow-500: #CA7F00;
  --yellow-700: #A66800;
  --red-50:  #FEF2F2;
  --red-500: #A82518;
  --red-700: #881D13;
  --blue-50:  #EFF6FF;
  --blue-500: #0F62C4;
  --blue-700: #0C4F9E;

  /* Typography: Font Families */
  --font-barlow:           'Barlow', 'Helvetica Neue', 'Arial', sans-serif;
  --font-barlow-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-epilogue:         'Epilogue', 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Typography: Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;
  --weight-black:    900;

  /* Typography: Font Sizes */
  --size-display-control: clamp(3.5rem, 12vw, 12rem);
  --size-display:        clamp(2.5rem, 7vw, 8rem);
  --size-h1:             clamp(2rem, 5vw, 5rem);
  --size-h2:             clamp(1.5rem, 3.5vw, 3rem);
  --size-h3:             clamp(1.125rem, 2vw, 1.75rem);
  --size-body-lg:        1.125rem;
  --size-body:           1rem;
  --size-body-sm:        0.875rem;
  --size-caption:        0.6875rem;
  --size-ui:             0.9375rem;

  /* Typography: Line Heights */
  --lh-display-condensed: 0.9;
  --lh-display:           1.0;
  --lh-h1:                1.05;
  --lh-h2:                1.15;
  --lh-h3:                1.25;
  --lh-body:              1.55;
  --lh-body-large:        1.6;
  --lh-body-small:        1.5;
  --lh-caption:           1.4;
  --lh-ui:                1.4;

  /* Typography: Letter Spacing */
  --tracking-display-condensed: -0.04em;
  --tracking-display:           -0.015em;
  --tracking-h1:                -0.02em;
  --tracking-h2:                -0.02em;
  --tracking-h3:                -0.01em;
  --tracking-label:              0.1em;
  --tracking-body:               0.005em;
  --tracking-chaos:              0.02em;

  /* Spacing (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* Border Radius */
  --radius-none:    0;
  --radius-sm:      4px;
  --radius-default: 8px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-xl:      20px;
  --radius-2xl:     24px;
  --radius-card:    20px;
  --radius-pill:    100px;
  --radius-full:    9999px;
  --radius-circle:  50%;

  /* Shadows (warm-tinted, Static Ground base) */
  --shadow-xs:     0 1px 2px rgba(26, 20, 18, 0.04);
  --shadow-sm:     0 1px 3px rgba(26, 20, 18, 0.06), 0 1px 2px rgba(26, 20, 18, 0.04);
  --shadow-subtle: 0 1px 3px rgba(26, 20, 18, 0.06), 0 4px 12px rgba(26, 20, 18, 0.04);
  --shadow-md:     0 4px 6px rgba(26, 20, 18, 0.06), 0 2px 4px rgba(26, 20, 18, 0.04);
  --shadow-lg:     0 10px 15px rgba(26, 20, 18, 0.06), 0 4px 6px rgba(26, 20, 18, 0.04);
  --shadow-xl:     0 20px 25px rgba(26, 20, 18, 0.08), 0 8px 10px rgba(26, 20, 18, 0.04);

  /* Opacity */
  --opacity-hover:    0.8;
  --opacity-muted:    0.5;
  --opacity-chaos:    0.4;
  --opacity-disabled: 0.38;
  --opacity-overlay:  0.3;

  /* Z-Index */
  --z-base:           0;
  --z-raised:         10;
  --z-dropdown:       100;
  --z-nav:            100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-overlay:        300;
  --z-modal-backdrop: 400;
  --z-modal:          500;
  --z-popover:        600;
  --z-tooltip:        700;
  --z-toast:          800;

  /* Motion: Easing */
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-smooth:  cubic-bezier(0.37, 0, 0.63, 1);

  /* Motion: Duration */
  --duration-fast:     200ms;
  --duration-micro:    250ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-entrance: 700ms;
  --duration-scroll:   700ms;
  --duration-hero:     1100ms;

  /* Grid */
  --grid-columns:   12;
  --grid-max-width: 1440px;
  --grid-gutter:    24px;
  --grid-prose-max: 720px;
  --grid-margin:    16px;
}

/* Responsive Grid Overrides */
@media (min-width: 480px) {
  :root { --grid-gutter: 32px; --grid-margin: 32px; }
}
@media (min-width: 768px) {
  :root { --grid-margin: 48px; }
}
@media (min-width: 1280px) {
  :root { --grid-margin: 64px; }
}


/* ── Tier 2: Semantic ── */
:root {
  /* Backgrounds */
  --color-bg-page:           var(--cream-100);
  --color-bg-surface:        #FFFFFF;
  --color-bg-surface-raised: #FFFFFF;
  --color-bg-surface-sunken: var(--mauve-100);
  --color-bg-surface-alt:    var(--cream-200);
  --color-bg-subtle:         var(--cream-50);
  --color-bg-chaos-1:        var(--mauve-100);
  --color-bg-chaos-2:        var(--olive-100);
  --color-bg-hover:          #FFF5EB;
  --color-bg-overlay:        rgba(26, 20, 18, var(--opacity-overlay));

  /* Text */
  --color-text-primary:   var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-tertiary:  var(--neutral-500);
  --color-text-muted:     var(--neutral-500);
  --color-text-inverse:   var(--neutral-50);
  --color-text-on-accent: #FFFFFF;

  /* Brand */
  --color-brand-primary: var(--orange-500);
  --color-brand-dark:    var(--orange-600);
  --color-brand-darker:  var(--orange-700);
  --color-brand-light:   var(--orange-300);
  --color-brand-chaos-1: var(--mauve-500);
  --color-brand-chaos-2: var(--olive-500);

  /* Interactive */
  --color-link:       var(--orange-600);
  --color-link-hover: var(--orange-700);
  --color-focus-ring: var(--orange-400);

  /* Status */
  --color-success: var(--green-500);
  --color-warning: var(--yellow-500);
  --color-error:   var(--red-500);
  --color-info:    var(--blue-500);

  /* Border */
  --color-border-default: var(--neutral-200);
  --color-border-strong:  var(--neutral-400);
  --color-border-subtle:  var(--neutral-100);
  --color-border-accent:  var(--orange-500);

  /* Typography: Semantic Roles */
  --font-display:           var(--font-barlow-condensed);
  --font-heading:           var(--font-barlow);
  --font-heading-condensed: var(--font-barlow-condensed);
  --font-body:              var(--font-epilogue);

  /* Shadows: Semantic */
  --shadow-default: var(--shadow-subtle);
  --shadow-card:    var(--shadow-sm);
  --shadow-modal:   var(--shadow-xl);
  --shadow-nav:     var(--shadow-subtle);

  /* Spacing: Section-level */
  --space-section-sm:  var(--space-12);
  --space-section-md:  var(--space-16);
  --space-section-lg:  var(--space-20);
  --space-section-xl:  var(--space-24);
  --space-page-gutter: var(--grid-margin);

  /* Motion: Semantic */
  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-medium: var(--duration-scroll) var(--ease-out);
  --transition-slow:   var(--duration-hero) var(--ease-out);
}


/* ── Tier 3: Component tokens ── */
:root {
  /* Button: Primary */
  --btn-primary-bg:         var(--color-brand-dark);
  --btn-primary-bg-hover:   var(--color-brand-darker);
  --btn-primary-text:       var(--color-text-on-accent);
  --btn-primary-radius:     var(--radius-pill);
  --btn-primary-padding:    var(--space-3) var(--space-8);
  --btn-primary-font:       var(--font-body);
  --btn-primary-weight:     var(--weight-semibold);
  --btn-primary-size:       var(--size-ui);

  /* Card */
  --card-bg:      var(--color-bg-surface);
  --card-radius:  var(--radius-card);
  --card-padding: var(--space-6);
  --card-shadow:  var(--shadow-card);
  --card-gap:     var(--space-9);

  /* Navigation */
  --nav-bg:          var(--color-bg-page);
  --nav-text:        var(--color-text-primary);
  --nav-text-active: var(--color-brand-dark);
  --nav-height:      72px;
  --nav-shadow:      var(--shadow-nav);
  --nav-z:           var(--z-nav);

  /* Footer */
  --footer-bg:    var(--neutral-900);
  --footer-text:  var(--neutral-200);
  --footer-link:  var(--neutral-100);
  --footer-muted: var(--neutral-400);
}


/* ══════════════════════════════════════════════════════════════
   SHARED UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */

/* ── Typography ── */
.type-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-display);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-display);
}
.type-h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
}
.type-h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}
.type-h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}
.type-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}
.type-body-lg {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-large);
  letter-spacing: var(--tracking-body);
}
.type-overline {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ── Page container ── */
.page-container {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--grid-gutter) var(--grid-gutter) 0;
}

/* ── Card sections ── */
.card-section {
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}

/* ── Layout ── */
.prose-w  { max-width: var(--grid-prose-max); margin-inline: auto; }
.content-w { max-width: var(--grid-max-width); margin-inline: auto; }

.card-pad {
  padding: clamp(var(--space-14), 8vw, var(--space-24)) clamp(var(--space-8), 5vw, var(--space-20));
}
.card-pad-hero {
  padding: clamp(var(--space-16), 12vw, 140px) clamp(var(--space-8), 5vw, var(--space-20));
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-8);
  background: var(--btn-primary-bg);
  color: var(--color-text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-ui);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
}
.btn-primary .arrow {
  display: inline-block;
  transition: transform var(--duration-micro) var(--ease-out);
}
.btn-primary:hover .arrow {
  transform: translateX(4px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-8);
  background: transparent;
  color: var(--color-brand-dark);
  border: 2px solid var(--color-brand-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-ui);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-ghost:hover {
  background: var(--color-brand-dark);
  color: var(--color-text-on-accent);
}
.btn-ghost .arrow {
  display: inline-block;
  transition: transform var(--duration-micro) var(--ease-out);
}
.btn-ghost:hover .arrow {
  transform: translateX(4px);
}

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-8);
  background: rgba(255,255,255,0.1);
  color: var(--cream-100);
  border: 1.5px solid rgba(255,249,240,0.25);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-ui);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,0.18);
}

.btn-primary--inverse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 40px;
  background: var(--color-bg-page);
  color: var(--color-brand-darker);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--size-body);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.btn-primary--inverse:hover {
  background: var(--color-bg-surface);
}
.btn-primary--inverse .arrow {
  display: inline-block;
  transition: transform var(--duration-micro) var(--ease-out);
}
.btn-primary--inverse:hover .arrow {
  transform: translateX(4px);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base body ── */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENTS — Nav
   Styles previously inline in components/nav.html
   ══════════════════════════════════════════════════════════════ */

#site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.nav {
  background: var(--nav-bg);
  transition: background var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.nav--scrolled {
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-nav);
}
.nav__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}
.nav__logo {
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}
.nav__logo img {
  height: 36px;
  display: block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__link {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--size-ui);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
  cursor: pointer;
  position: relative;
  padding: 6px 0;
}
.nav__link:hover { color: var(--color-brand-dark); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-brand-dark);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
  pointer-events: none;
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link--active {
  color: var(--color-brand-dark) !important;
  font-weight: var(--weight-semibold);
}
.nav__link--active::after { transform: scaleX(1); }
.nav__cta {
  padding: 10px var(--space-6);
  font-size: var(--size-body-sm);
}
.nav__cta::after { display: none !important; }
.nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--color-text-primary);
  align-items: center;
  justify-content: center;
}

/* Mobile overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-page);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.mobile-overlay--open { opacity: 1; visibility: visible; }
.mobile-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  height: var(--nav-height);
  flex-shrink: 0;
}
.mobile-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}
.mobile-overlay__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-8);
}
.mobile-overlay__link {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 5vw, 3rem);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-h1);
  transition: color var(--duration-fast) ease;
}
.mobile-overlay__link:hover { color: var(--color-brand-dark); }
.mobile-overlay__link--active {
  color: var(--color-brand-dark) !important;
}
.mobile-overlay__cta {
  margin-top: var(--space-4);
  padding: var(--space-4) 40px;
  font-size: var(--size-body);
}

@media (max-width: 768px) {
  .nav__links { display: none !important; }
  .nav__hamburger { display: flex !important; }
  .page-container { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
}


/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENTS — Footer
   Styles previously inline in components/footer.html
   ══════════════════════════════════════════════════════════════ */

.footer {
  background: var(--footer-bg);
  margin-top: var(--space-12);
}
.footer__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8) var(--space-8);
}
.footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.footer__heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  font-size: var(--size-body-sm);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-chaos);
}
.footer__link {
  font-family: var(--font-body);
  color: var(--footer-muted);
  font-size: var(--size-body-sm);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}
.footer__link:hover { color: var(--color-text-inverse); }
.footer__text {
  font-family: var(--font-body);
  color: var(--footer-muted);
  font-size: var(--size-ui);
  line-height: var(--lh-body);
  max-width: 320px;
}
.footer__bar {
  border-top: 1px solid rgba(248, 245, 242, 0.1);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__copyright {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .footer__cols { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}