/* Sightrep design tokens — the one place for color, type, spacing, radius and
   motion. Every screen and future feature uses these; nothing else should hold
   a raw color or font.

   Themes: light is the base; dark follows the phone (prefers-color-scheme)
   unless the athlete picked one in Settings → Appearance, which sets
   data-appearance="light" | "dark" | "outdoor" on <html>. Outdoor is a
   high-contrast light theme for bright sun.

   Cone colors live in their own section: they are pure and true, never tinted
   and never part of the brand palette. */

:root {
  /* ---- Type: Archivo (display, wide for headings, narrow for numbers and cues)
          + Schibsted Grotesk (body). Fallbacks keep the layout if fonts fail. */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Archivo", "Arial Narrow", Arial, sans-serif;
  --wdth-wide: "wdth" 118;     /* headings, buttons */
  --wdth-narrow: "wdth" 72;    /* scores, timers, big cues */
  --weight-display: 800;
  --weight-num: 800;

  /* Type scale: six sizes. Tight leading for display, generous for reading. */
  --text-score: clamp(3.5rem, 16vw, 4.5rem);     /* scores, countdowns */
  --text-display: clamp(2.125rem, 9vw, 2.75rem); /* screen titles */
  --text-title: 1.375rem;                        /* group and card titles */
  --text-body: 1.0625rem;                        /* 17px reading text */
  --text-label: 0.8125rem;                       /* 13px caps labels */
  --text-caption: 0.75rem;                       /* 12px fine print */
  --leading-display: 0.95;
  --leading-body: 1.5;
  --tracking-label: 0.08em;

  /* Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --gutter: var(--space-4);

  /* Radius */
  --radius-s: 8px; --radius-m: 14px; --radius-pill: 999px;

  /* Touch targets */
  --tap: 48px;        /* minimum */
  --tap-primary: 56px;

  /* Motion: quick and directional. Reduced-motion users get no movement. */
  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --slide: 24px;

  /* ---- Color: light (neutrals tinted toward Volt Lime, never flat gray) ---- */
  --bg: #F5F6F0;
  --surface: #FFFFFF;
  --raised: #ECEEE4;
  --line: #DADDCF;
  --line-strong: #10120D;
  --line-w: 1px;
  --text: #10120D;
  --muted: #565B4C;
  --accent: #B7FF00;          /* brand: primary buttons, active states, #1 rank */
  --accent-ink: #10120D;      /* text on accent */
  --accent-text: #3F5C00;     /* accent used as text (lime itself fails contrast on light) */
  --accent-border: transparent;
  --move: #22D3EE;            /* MOVE side tone (FOCUS uses the brand lime) */
  --move-ink: #10120D;
  --move-text: #0B5F6E;
  --good: #0B7A4B;            /* correct / success text */
  --bad: #B8321C;             /* wrong / error text */
  --warn-bg: #FFF4C2;
  --warn-text: #5C4600;
  --overlay: rgba(245, 246, 240, 0.96);
  --scrim: rgba(16, 18, 13, 0.45);
  color-scheme: light;

  /* ---- Drill canvas: cue screens stay pure black / true color in every theme ---- */
  --cue-bg: #000000;
  --cue-fg: #FFFFFF;
  --cue-muted: #8E9384;
  --cue-accent: #B7FF00;

  /* ---- Cone colors: pure and true, shared by FOCUS cues and MOVE cones ---- */
  --cone-red: #ff4d2e;
  --cone-blue: #2f7bff;
  --cone-green: #12c48b;
  --cone-yellow: #ffd60a;
}

/* Dark: follows the phone unless the athlete picked Light or Outdoor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]):not([data-appearance="outdoor"]) {
    --bg: #0A0B08; --surface: #121410; --raised: #191C15; --line: #272B21; --line-strong: #F2F4EC;
    --text: #F2F4EC; --muted: #A2A895; --accent: #B7FF00; --accent-ink: #0A0B08; --accent-text: #B7FF00;
    --move: #22D3EE; --move-ink: #0A0B08; --move-text: #22D3EE;
    --good: #3DDC97; --bad: #FF6B52; --warn-bg: #2A2410; --warn-text: #FFD60A;
    --overlay: rgba(10, 11, 8, 0.96); --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-appearance="dark"] {
  --bg: #0A0B08; --surface: #121410; --raised: #191C15; --line: #272B21; --line-strong: #F2F4EC;
  --text: #F2F4EC; --muted: #A2A895; --accent: #B7FF00; --accent-ink: #0A0B08; --accent-text: #B7FF00;
  --move: #22D3EE; --move-ink: #0A0B08; --move-text: #22D3EE;
  --good: #3DDC97; --bad: #FF6B52; --warn-bg: #2A2410; --warn-text: #FFD60A;
  --overlay: rgba(10, 11, 8, 0.96); --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
/* Outdoor / high contrast: pure black on white, heavier lines, outlined lime. */
:root[data-appearance="outdoor"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --raised: #F0F0F0; --line: #000000; --line-strong: #000000; --line-w: 2px;
  --text: #000000; --muted: #262626; --accent: #B7FF00; --accent-ink: #000000; --accent-text: #000000;
  --accent-border: #000000; --move: #22D3EE; --move-ink: #000000; --move-text: #000000; --good: #00592F; --bad: #A3200B; --warn-bg: #FFE14D; --warn-text: #000000;
  --overlay: rgba(255, 255, 255, 0.98); --scrim: rgba(0, 0, 0, 0.5);
  color-scheme: light;
}

/* Side identity: FOCUS wears the brand lime, MOVE a cool cyan. Same system,
   only the accent tone changes, so athletes always know which side they're on. */
:root, [data-side="focus"] { --side: var(--accent); --side-ink: var(--accent-ink); --side-text: var(--accent-text); }
[data-side="move"] { --side: var(--move); --side-ink: var(--move-ink); --side-text: var(--move-text); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --slide: 0px; }
}