/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — tokens.css (Phase 8a — aligned to v1)
   ────────────────────────────────────────────────────────────────────────────

   The single source of truth for visual style. Anything that should be
   consistent across the app — colors, typography, spacing, motion — is
   declared here and referenced by name everywhere else.

   This phase pulls the tokens into alignment with v1's hard-won visual
   feel. Outfit is the primary face; the type scale is tighter; --text3
   is more faded for a stronger hierarchy; we use --radius (12px) and
   --radius-lg (16px) as the only two surface radii.

   Some v2-only tokens stay (motion timings, --space-N spacing). They're
   load-bearing for the FCY overlay and other Phase 6/7 components and
   weren't a v1 concern.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── COLORS · FOUNDATION ──────────────────────────────────────────────── */
  --bg:       #0a0a0c;
  --surface:  #111115;
  --surface2: #18181e;

  --border:   rgba(255, 255, 255, 0.06);
  --border2:  rgba(255, 255, 255, 0.12);

  /* ── COLORS · TEXT ────────────────────────────────────────────────────── */
  /* v1 values restored. text3 at 0.25 makes the hierarchy work — when
     everything's only 0.40 faded, nothing recedes. */
  --text:     #ffffff;
  --text2:    rgba(255, 255, 255, 0.55);
  --text3:    rgba(255, 255, 255, 0.25);

  /* ── COLORS · CLASS (IMSA OFFICIAL) ───────────────────────────────────── */
  --gtp:      #e8e8e8;
  --lmp2:     #5b9bd5;
  --gtdpro:   #e31937;
  --gtd:      #00a94f;

  /* ── COLORS · BRAND / SEMANTIC ────────────────────────────────────────── */
  --purple:   #a855f7;   /* primary brand — wordmark accent, "going purple" */
  --purple2:  #7c3aed;   /* deeper variant */
  --purple3:  #c084fc;   /* lighter variant */
  --yellow:   #ffd600;   /* brand yellow — interactive UI, garage indicator */
  --red:      #ff1744;
  --green:    #00e676;

  /* Race signal colors. Same hex as semantic but used for flag states. */
  --yellow-flag: #ffb300;
  --checker:   #ffffff;

  /* ── TYPOGRAPHY · FAMILIES ────────────────────────────────────────────── */
  /* Outfit is the body face. v1's call, restored. Cold-start cost is ~80KB
     compressed and ~150ms blocking; in exchange the app feels like a
     product, not a tool. The fallback chain is system fonts so the layout
     doesn't shift dramatically before Outfit arrives.

     display=swap is set on the link tag — text renders in the fallback
     immediately and swaps to Outfit when ready. */
  --font:
    'Outfit',
    -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display',
    'Segoe UI', Roboto, system-ui, sans-serif;

  --font-mono:
    ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Code',
    'Source Code Pro', monospace;

  /* tabular-nums applied via font-variant-numeric on .num / tabular cells */
  --num-features: 'tnum' 1, 'lnum' 1;

  /* ── SPACING (kept from v2 for non-v1 components) ──────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── RADIUS — v1 values ──────────────────────────────────────────────── */
  --radius:     12px;
  --radius-lg:  16px;
  --radius-pill: 9999px;

  /* ── SHADOWS — sparing use ─────────────────────────────────────────────── */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --motion-fast:   140ms;
  --motion-medium: 260ms;
  --motion-slow:   480ms;

  /* ── LAYOUT ───────────────────────────────────────────────────────────── */
  --tap: 44px;            /* iOS HIG / WCAG tap target */
  --content-max: 600px;   /* v1's content cap */
  --header-h: 56px;       /* sticky header height — derived from v1's 44+10+border */

  /* ── SAFE-AREA INSETS ─────────────────────────────────────────────────── */
  /* Stored as their own variables so callers can compose with max() etc.
     Not done by env() directly because env() only returns useful values
     inside specific contexts. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}


/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   1ms;
    --motion-medium: 1ms;
    --motion-slow:   1ms;
  }
}