/* ============================================================================
   DESIGN TOKENS
   Derived from DESIGN.md (Hyer Aviation style reference).

   Two deliberate departures from the source document, both documented in the
   build plan:

   1. TIER COLOURS ARE MONOCHROME. The system permits exactly one accent hue.
      Three tiers still need to be distinguishable, so they differentiate by
      VALUE (ink → ash → pebble), which is how this system already expresses
      hierarchy. Clay is reserved for selection state — one element, ever.

   2. THE TYPE SCALE IS FLUID. 187px is unusable at 375px. The source's
      letter-spacing is proportional once converted (-3.74/187, -2.62/131 and
      -1.26/63 all resolve to -0.02em), so the whole scale expresses as
      clamp() sizes with em-based tracking and keeps its architectural
      character at every viewport.
   ========================================================================== */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --color-deep-ink:      #000d10;
  --color-pure-white:    #ffffff;
  --color-cool-ash:      #8e8e95;
  --color-pebble:        #d5d3d4;
  --color-midnight-hull: #0f0f1c;
  --color-charcoal-deck: #151623;
  --color-clay-ember:    #bc7155;

  /* Surfaces */
  --surface-canvas:  var(--color-pure-white);
  --surface-card:    var(--color-pure-white);
  --surface-dark:    var(--color-midnight-hull);
  --surface-deck:    var(--color-charcoal-deck);
  --surface-footer:  var(--color-midnight-hull);

  /* Hero gradient — pale sky to warm cream, per the reference's imagery note.
     Also the environment gradient sampled by the 3D scene. */
  --gradient-hero: linear-gradient(
    172deg,
    #dfe8ee 0%,
    #eef1f2 42%,
    #f7f4f0 74%,
    #faf7f3 100%
  );

  /* Semantic */
  --text-primary:   var(--color-deep-ink);
  --text-muted:     var(--color-cool-ash);
  --text-on-dark:   var(--color-pure-white);
  --border-hairline: var(--color-pebble);
  --accent:         var(--color-clay-ember);

  /* Tier ramp — value, not hue. */
  --tier-hero:  var(--color-deep-ink);
  --tier-mid:   var(--color-cool-ash);
  --tier-small: var(--color-pebble);

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display: 'Inter', 'Inter var', ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
                  Arial, sans-serif;

  --weight-regular: 400;
  --weight-bold:    700;

  /* Fluid scale. Desktop ceilings match DESIGN.md; floors are chosen so
     nothing overflows at 320px. */
  --text-hero:       clamp(2.85rem, 11.2vw, 11.7rem);  /*  46 → 187 */
  --text-display-xl: clamp(2.45rem, 8.2vw,  8.19rem);  /*  39 → 131 */
  --text-display:    clamp(2.05rem, 5.6vw,  3.94rem);  /*  33 →  63 */
  --text-heading-lg: clamp(1.85rem, 4.4vw,  3.25rem);  /*  30 →  52 */
  --text-heading:    clamp(1.6rem,  3.3vw,  2.31rem);  /*  26 →  37 */
  --text-heading-sm: clamp(1.4rem,  2.4vw,  1.88rem);  /*  22 →  30 */
  --text-subheading: clamp(1.2rem,  1.6vw,  1.44rem);  /*  19 →  23 */
  --text-nav:        1.25rem;                          /*  20      */
  --text-body:       1.125rem;                         /*  18 — floor. Never below. */
  --text-caption:    1.0625rem;                        /*  17      */

  /* Tracking — proportional, so it holds at every clamp position. */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:     0;

  /* Leading */
  --leading-display: 0.92;
  --leading-heading: 1.0;
  --leading-body:    1.61;

  /* ── Space ──────────────────────────────────────────────────────────── */
  --space-unit: 4px;
  --space-xs:   11px;
  --space-sm:   16px;
  --space-md:   22px;
  --space-lg:   34px;
  --space-xl:   52px;
  --space-2xl:  68px;
  --space-3xl:  119px;

  --page-max:     1200px;
  --section-gap:  clamp(56px, 9vw, 80px);
  --section-pad-y: clamp(64px, 11vw, 119px);
  --gutter:       clamp(20px, 5vw, 40px);
  --card-padding: 22px;
  --element-gap:  16px;

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --radius-pill:  1000px;   /* every button and nav element. No exceptions. */
  --radius-panel: 0px;      /* hard-edged panels. Also no exceptions. */
  --radius-decorative: 45px;
  --radius-circle: 50%;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 520ms;
}

/* The reference defines elevation through surface colour, never shadow.
   The one exception is the faked contact shadow under the 3D car, which is
   geometry inside the canvas rather than a CSS shadow. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}