/* ==========================================================================
   GripVid Design Tokens — "Wayfinding"
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, shape, depth and motion.
   Nothing in the codebase may hard-code a hex value, a font size, or a spacing
   number. If a value is needed and not here, add it here first.

   Contrast: every text/background pair below has been measured against WCAG 2.1.
   Ratios are recorded in comments — do not change a value without re-measuring.
   ========================================================================== */

:root {

  /* ── Brand ─────────────────────────────────────────────────────────────
     --signal is the GripVid orange. It is a SURFACE colour, never small text:
     orange on the page ground measures 2.69:1 and fails AA. Use --signal for
     fills, bars and markers, put --ink on top of it, and use --signal-deep
     whenever the orange itself has to be text.                              */
  --signal:            #F97316;   /* fills only            — ink on it = 6.67:1 AA */
  --signal-deep:       #C2410C;   /* orange as text        — on ground  = 4.96:1 AA */
  --signal-soft:       #FFF0E6;   /* tinted zone fill */
  --signal-border:     #FBC392;   /* tinted hairline */

  /* Supporting accent. Cold, so the orange reads as a signal and not a mood. */
  --trust:             #0B5F63;   /* on ground = 7.11:1 AAA · white on it = 7.42:1 AAA */
  --trust-soft:        #E6F2F2;

  /* ── Ground & surface ──────────────────────────────────────────────────
     Warm off-white. Deliberately not #FFF — the page needs a temperature.   */
  --ground:            #FBFAF8;
  --surface:           #FFFFFF;
  --ink:               #141210;   /* on ground = 17.91:1 AAA */

  /* ── Neutral ramp ──────────────────────────────────────────────────────
     Warm-tinted. Each step has ONE permitted role; the ratio against
     --ground is recorded so the role cannot be misapplied by accident.      */
  --n-50:              #F5F3F0;   /*  1.06 — zone fills only          */
  --n-100:             #E9E5E0;   /*  1.20 — subtle borders           */
  --n-200:             #D5D0C9;   /*  1.47 — hairline rules           */
  --n-300:             #A39B91;   /*  2.63 — disabled text, icons     */
  --n-400:             #6E665C;   /*  5.41 — AA. Lightest legal text  */
  --n-500:             #4A443B;   /*  9.23 — AAA secondary text       */
  --n-600:             #2B2822;   /* 14.08 — AAA strong secondary     */

  /* ── Semantic state ────────────────────────────────────────────────────*/
  --ok:                #0B5F63;
  --ok-soft:           #E6F2F2;
  --warn:              #8A5A00;   /* on ground = 5.68:1 AA */
  --warn-soft:         #FFF4DC;
  --danger:            #A32118;   /* on ground = 7.22:1 AA */
  --danger-soft:       #FDECEA;

  /* ── Text roles (use these, not the ramp directly) ─────────────────────*/
  --text-primary:      var(--ink);
  --text-secondary:    var(--n-500);
  --text-muted:        var(--n-400);
  --text-disabled:     var(--n-300);
  --text-on-signal:    var(--ink);      /* never white — 2.80:1 fails */
  --text-on-trust:     var(--surface);

  /* ── Borders ───────────────────────────────────────────────────────────*/
  --border-subtle:     var(--n-100);
  --border-hairline:   var(--n-200);
  --border-strong:     var(--ink);

  /* ══ TYPOGRAPHY ══════════════════════════════════════════════════════ */

  /* Plus Jakarta Sans — refined geometric sans, sentence case everywhere.
     The previous Archivo Expanded all-caps treatment was replaced after
     review: it read as harsh rather than premium.                           */
  --font-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', -apple-system, sans-serif;
  --font-body:    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Kept for compatibility; both resolve to normal now that no face carries
     a width axis. Nothing should reference expanded any more. */
  --width-expanded:  100;
  --width-normal:    100;

  /* Type scale — desktop. Mobile overrides live in the media query below.
     Each step is size / line-height / letter-spacing.                       */
  --t-display-xl:      3.5rem;    /* 56px  hero h1 — sentence case, not caps */
  --t-display-xl-lh:   1.08;
  --t-display-xl-ls:   -0.025em;

  --t-display-l:       2.25rem;   /* 36px  section h2     */
  --t-display-l-lh:    1.15;
  --t-display-l-ls:    -0.02em;

  --t-heading-m:       1.625rem;  /* 26px  h3             */
  --t-heading-m-lh:    1.25;
  --t-heading-m-ls:    -0.01em;

  --t-body-l:          1.1875rem; /* 19px  hero subtitle  */
  --t-body-l-lh:       1.55;

  --t-body-m:          1rem;      /* 16px  default        */
  --t-body-m-lh:       1.65;

  --t-body-s:          0.875rem;  /* 14px                 */
  --t-body-s-lh:       1.55;

  --t-data:            0.875rem;  /* 14px  mono readouts  */
  --t-data-lh:         1.40;
  --t-data-ls:         0.02em;

  --t-eyebrow:         0.75rem;   /* 12px  uppercase      */
  --t-eyebrow-lh:      1;
  --t-eyebrow-ls:      0.10em;

  /* Inputs must never fall below 16px or iOS Safari zooms the page on focus. */
  --t-input-min:       1rem;

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Reading measure for long-form text (blog posts, legal pages) */
  --measure:           68ch;

  /* ══ SPACE ═══════════════════════════════════════════════════════════
     4px base. Section rhythm is a single value applied everywhere — this is
     what stops the page reading as identical stacked boxes.                 */
  --s-1:   0.25rem;   /*   4 */
  --s-2:   0.5rem;    /*   8 */
  --s-3:   0.75rem;   /*  12 */
  --s-4:   1rem;      /*  16 */
  --s-5:   1.25rem;   /*  20 */
  --s-6:   1.5rem;    /*  24 */
  --s-8:   2rem;      /*  32 */
  --s-10:  2.5rem;    /*  40 */
  --s-12:  3rem;      /*  48 */
  --s-14:  3.5rem;    /*  56 */
  --s-16:  4rem;      /*  64 */
  --s-20:  5rem;      /*  80 */
  --s-24:  6rem;      /*  96 */
  --s-32:  8rem;      /* 128 */

  /* Tightened from 96/128 after review: the page read as gappy. */
  --section-gap:       var(--s-16);   /* 64 desktop */
  --section-gap-major: var(--s-20);   /* 80 at major breaks */
  --gutter:            var(--s-6);
  --container-max:     72rem;         /* 1152 */
  --container-narrow:  44rem;         /* 704 — long-form reading */

  /* ══ CONTROLS & ICONS ════════════════════════════════════════════════
     Component-intrinsic dimensions. These repeat across the library, so they
     are tokens rather than literals.
     NOTE: media-query breakpoints cannot be custom properties (CSS does not
     resolve var() in @media), so 767px stays literal in the component file.  */
  --tap-min:        44px;   /* WCAG tap-target floor — never go below */
  --control-h-sm:   44px;
  --control-h-md:   52px;
  --control-h-lg:   56px;
  --control-h-xl:   60px;   /* the Slot's input */

  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 28px;

  --progress-h:         8px;
  --platform-card-min: 160px;   /* grid track floor before wrapping */
  --header-h:           64px;   /* sticky header; drawer head matches it */

  --backdrop: rgba(20, 18, 16, .45);

  /* ══ SHAPE ═══════════════════════════════════════════════════════════ */
  --radius-sm:   6px;    /* inputs, chips        */
  --radius-md:  10px;    /* buttons, cards       */
  --radius-lg:  16px;    /* large panels         */
  --radius-pill: 999px;

  --border-width:        1px;
  --border-width-strong: 2px;   /* the signature input */

  /* ══ DEPTH ═══════════════════════════════════════════════════════════
     Layered and soft. Never a single harsh drop shadow.                     */
  --shadow-sm: 0 1px 2px rgba(20,18,16,.05), 0 1px 1px rgba(20,18,16,.03);
  --shadow-md: 0 2px 4px rgba(20,18,16,.04), 0 4px 12px rgba(20,18,16,.06);
  --shadow-lg: 0 4px 8px rgba(20,18,16,.04), 0 12px 28px rgba(20,18,16,.08);
  --focus-ring: 0 0 0 3px rgba(249,115,22,.28);

  /* ══ MOTION ══════════════════════════════════════════════════════════
     Six animations exist site-wide: detect chip, format row stagger,
     progress width, accordion height, button press, focus ring. Nothing else. */
  --dur-instant: 90ms;
  --dur-fast:   160ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --ease-entrance: cubic-bezier(.2,.7,.3,1);
  --ease-movement: cubic-bezier(.6,0,.3,1);
  --stagger-step:  40ms;
  /* Looping loaders. Longer than the interaction durations on purpose: these
     run continuously, so a fast cycle reads as agitation. */
  --dur-shimmer:       1400ms;
  --dur-indeterminate: 1200ms;

  /* ══ LAYERING ════════════════════════════════════════════════════════ */
  --z-base:      0;
  --z-sticky:   100;
  --z-nav:      200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;

  /* ══ AD SLOTS ════════════════════════════════════════════════════════
     No ads are served today, but slots are reserved at fixed heights so that
     enabling them later causes zero cumulative layout shift.                */
  --ad-leaderboard-h: 90px;
  --ad-inline-h:     250px;
  --ad-mobile-h:     100px;
}

/* Mobile type scale. Body and inputs deliberately stay at 16px. */
@media (max-width: 767px) {
  :root {
    --t-display-xl:     2.25rem;   /* 36 */
    --t-display-xl-lh:  1.12;
    --t-display-xl-ls:  -0.02em;

    --t-display-l:      1.75rem;   /* 28 */
    --t-display-l-lh:   1.2;
    --t-display-l-ls:   -0.015em;

    --t-heading-m:      1.3125rem; /* 21 */
    --t-heading-m-lh:   1.30;

    --t-body-l:         1.0625rem; /* 17 */
    --t-body-m-lh:      1.60;

    --section-gap:       var(--s-12);   /* 48 */
    --section-gap-major: var(--s-14);   /* 56 */
    --gutter:            var(--s-4);
  }
}

/* Motion is opt-out at the token level, so no component can ignore it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
    --stagger-step: 0ms;
  }
}