/* =========================================================================
   The App Dev Co — Design Tokens (Session 01 scaffold)
   Midnight Operator palette. Single source of truth.
   ========================================================================= */

:root {
  /* Colour — Midnight Operator (LOCKED) */
  --color-primary:       #0A1A3F;   /* Deep Navy */
  --color-primary-dark:  #040D2E;
  --color-accent:        #E8B400;   /* Rich Gold — the brand accent (deepened from #FFD60A) */
  --color-accent-hi:     #F4C01C;   /* ~6% lighter — top stop for the button sheen gradient */
  --color-accent-dark:   #CC9E00;   /* hover / pressed / lower gradient stop */

  /* Rich-gold BAND fill — LARGE full-bleed sections ONLY (never small accents).
     The brand accent above stays luminous so buttons / .vh-mark / gold-on-navy
     text keep popping; large fills use this deeper "Deep Goldenrod" so a whole
     band reads as calm, premium gold leaf instead of hot yellow. */
  --color-band-top:      #E2AE1E;   /* sheen / lighter gold — top stop      */
  --color-band:          #D4A017;   /* Deep Goldenrod — base / solid fallback */
  --color-band-deep:     #BE8E12;   /* settles darker toward the base       */
  --color-band-dark:     #B8870E;   /* band-on-band hover / pressed         */

  /* Metallic rich-gold band finish: faint grayscale grain (kills banding on a
     huge fill) + a soft top sheen highlight + the deep-goldenrod body gradient.
     Apply as `background: var(--gold-band);` on full-bleed gold sections only. */
  --gold-band:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E") repeat,
    radial-gradient(118% 82% at 50% -12%, rgba(255, 255, 255, 0.17), transparent 62%),
    linear-gradient(177deg, var(--color-band-top) 0%, var(--color-band) 46%, var(--color-band-deep) 100%);

  --color-ink:           #0F1419;
  --color-ink-soft:      #3B4554;
  --color-muted:         #6B7280;
  --color-surface:       #F8F9FB;
  --color-surface-elev:  #FFFFFF;
  --color-border:        #E5E7EB;

  /* Type */
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 32px;

  /* Motion */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset (minimal) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface-elev);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   Heading highlighter (site-wide)
   The signature device from the homepage: an electric-lime marker on the key
   value-phrase of a section heading. `box-decoration-break: clone` makes the
   highlight hug each wrapped line. Navy text on lime = AAA contrast.
   Canonical source of truth — copied verbatim from home.css so every page's
   highlight is pixel-identical. Use one `.vh-mark` per heading.
   ========================================================================= */
.vh-mark {
  /* subtle top-down sheen (hi → gold) gives the marker depth without losing the
     navy-on-gold AAA contrast; box-decoration-break keeps it per-line on wraps */
  background: linear-gradient(180deg, var(--color-accent-hi), var(--color-accent));
  color: var(--color-primary);         /* navy text — AAA contrast */
  font-weight: 900;
  padding: 0.04em 0.14em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================================
   Page content scale (site-wide)
   The sticky nav stays at 100%; everything BELOW it zooms uniformly so every
   page shares one consistent "slightly zoomed-out" scale. A single tunable
   knob (--page-zoom). Desktop/tablet only — mobile stays 1.0 to keep body
   text >= 16px and avoid iOS tap auto-zoom.

   One rule block covers both DOM shapes:
   - Homepage (index.html) wraps the whole page in a single `.vh` div, so the
     content lives at `.vh > *` (nav is `.vh-nav`, excluded).
   - Every other page wraps ONLY the nav in `.vh`; content (`main`, `footer`)
     are `body` siblings of that wrapper.
   Each selector simply matches nothing on the page type it doesn't apply to.
   ========================================================================= */
:root { --page-zoom: 0.8; }

@media (min-width: 768px) {
  .vh-nav,                                                  /* nav scales WITH content so the whole site reads as one zoomed-out scale */
  .vh > *:not(.vh-nav),                                     /* homepage: sections + footer */
  body > *:not(.vh):not(script):not(style):not(noscript) { /* other pages: main + footer */
    zoom: var(--page-zoom, 0.8);
  }
}

/* =========================================================================
   Site-wide refinement layer (Session — polish pass)
   Additive only. Lives in tokens.css so every page inherits it with no
   per-page <link> edits. Nothing here changes layout or copy; it sharpens
   typography, focus, motion, and the small premium signals.
   ========================================================================= */

:root {
  /* Elevation scale — formalises the shadow language used ad hoc across files
     so cards / sheets / CTAs share one consistent, navy-tinted depth ramp. */
  --shadow-sm: 0 1px 2px rgba(4, 13, 46, 0.06), 0 2px 6px -2px rgba(4, 13, 46, 0.10);
  --shadow-md: 0 6px 16px -6px rgba(4, 13, 46, 0.14), 0 12px 28px -12px rgba(4, 13, 46, 0.18);
  --shadow-lg: 0 18px 40px -16px rgba(4, 13, 46, 0.26), 0 30px 64px -28px rgba(4, 13, 46, 0.34);
  /* Resting glow for gold actions */
  --accent-glow: 0 8px 22px -12px rgba(232, 180, 0, 0.55);
  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(232, 180, 0, 0.55), 0 0 0 5px rgba(10, 26, 63, 0.85);
}

/* Smooth, sticky-nav-aware in-page navigation. The visible nav is ~57.6px
   tall once zoomed (72 × 0.8); 72px scroll-padding lands anchors just below it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

/* Sharper Inter rendering site-wide (contextual + stylistic alternates). */
body {
  font-feature-settings: "cv11", "ss01";
}

/* Tabular figures for data — opt-in utility for stats, prices, timers so
   digits don't reflow as values change. */
.tnum,
[data-tnum] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Branded text selection — navy ink on the brand gold. */
::selection {
  background: var(--color-accent);
  color: var(--color-primary);
}
::-moz-selection {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* Global keyboard-focus ring fallback. Component-specific rings (e.g.
   .fcta__banner:focus-visible) still win on specificity; this just guarantees
   every interactive element has a visible, on-brand focus state. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
/* Pointer users never see the ring; keyboard users always do. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Quiet premium scrollbar (desktop pointer devices only). */
@media (hover: hover) and (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 26, 63, 0.32) transparent;
  }
  ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(10, 26, 63, 0.28);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 26, 63, 0.48);
    background-clip: content-box;
  }
}

/* Reduced-motion safety net — global belt-and-suspenders over per-file rules. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}