/*
 * Ranked Duo design tokens: the one place colors, type, spacing, radius, chamfer and shadows are defined.
 * Source: the "Ranked Duo" design system on claude.ai (tokens.json v2, Acid Industrial), as its tokens.css
 * lays them out. landing/public/tokens.css is an exact copy for rankedduo.com; tests/design-tokens.test.ts keeps
 * the two identical, so change both together (or copy this file over the landing one).
 *
 * Themes: Arena (dark) is the default everywhere. Paper (light, bone ground) is opt-in with data-theme="paper"
 * on <html>, and is what prints. Fonts are self-hosted from /fonts/ (public/fonts and landing/public/fonts).
 */

:root, [data-theme="arena"] {
  color-scheme: dark;
  --bg: #0e0e0c; /* Off-black ground. Everything sits on it. */
  --surface: #171715; /* Cards and panels. */
  --surface-raised: #201f1c; /* Raised rows, inputs, the active nav item. */
  --surface-overlay: #2a2a27; /* Concrete. Hover and pressed fills, tooltips, menus. */
  --line: #34332f; /* Hairlines and dividers between regions. Not for control borders. */
  --line-strong: #6b6a63; /* Control borders, chart axes; 3:1 on bg and surface. */
  --ink: #eae5d7; /* Bone. Primary text and icon strokes. */
  --ink-muted: #a9a498; /* Secondary text, labels, captions. */
  --ink-subtle: #8c887d; /* Tertiary text (sample sizes, timestamps); 13px minimum. */
  --support: #2ef2ff; /* ACID CYAN: support (the parent). Support buttons, the assist node, the tether, focus rings. */
  --support-strong: #12b8c4; /* Support data marks on charts where full cyan would glare. */
  --support-text: #2ef2ff; /* Cyan text and links on bg, surface, surface-raised. */
  --support-tint: #0c2426; /* Quiet support fills: the assist card, parent-facing panels. */
  --on-support: #0e0e0c; /* Text and icons on a support fill. */
  --player: #ff6b1a; /* HAZARD ORANGE: the player (the teen). His primary buttons, his chart line. */
  --player-strong: #d9530a; /* Player data marks on charts. */
  --player-text: #ff7a2e; /* Orange text and eyebrow labels on bg, surface, surface-raised. */
  --player-tint: #2a170c; /* Quiet player fills: the focus skill, the player's moment. */
  --on-player: #0e0e0c; /* Text and icons on a player fill. */
  --coach: #eae5d7; /* BONE: the AI coach. Outlined, never filled big. */
  --coach-text: var(--ink); /* The coach speaks in plain bone. */
  --coach-tint: #22211e; /* Transmission and debrief panels. */
  --on-coach: #0e0e0c; /* Text on a coach fill. */
  --signal: #f4e04d; /* SIGNAL YELLOW: grit zone only (hazard tape, stickers). Never status, never body text. */
  --rec: #ff3b30; /* Recording dot in CCTV framing only. Never for errors, status or the player. */
  --focus-ring: #2ef2ff; /* Keyboard focus outline, 2px solid, 2px offset. */
  --status-improving: var(--support-text); /* 'Improving', with its word and the trend icon. */
  --status-good: var(--ink); /* 'Looking good', with its word and the trend icon. */
  --status-steady: var(--ink-muted); /* 'Holding steady' and 'Stalled'. Never red. */
  --status-early: var(--ink-subtle); /* 'Too early to tell'. */
  --area-game: #ff6b1a; /* Regimen area Game. Always beside its label. */
  --area-school: #eae5d7; /* Regimen area School. */
  --area-sports: #2ef2ff; /* Regimen area Sports. */
  --area-hobby: #f4e04d; /* Regimen area Hobbies. */
  --area-rest: #6b6a63; /* Regimen area Rest: a positive block, never missing time. */
  --glow-player: 0 0 0 1px #ff6b1a, 0 0 28px 0 rgba(255,107,26,0.30); /* The player's moment. */
  --glow-support: 0 0 0 1px #2ef2ff, 0 0 28px 0 rgba(46,242,255,0.28); /* Anything support is asked to act on. */
  --elev-1: 0 12px 32px 0 rgba(0,0,0,0.55); /* Menus, tooltips, dialogs. */
  --mark-support: #2ef2ff; /* The mark's lower chevron, as the Logos group draws it (on light: #00a3ad, since full cyan vanishes on bone). */
}

[data-theme="paper"] {
  color-scheme: light;
  --bg: #eae5d7;
  --surface: #f4f1e8;
  --surface-raised: #e0dacb;
  --surface-overlay: #d5cfbf;
  --line: #c9c2b0;
  --line-strong: #7a7568;
  --ink: #0e0e0c;
  --ink-muted: #4a4842;
  --ink-subtle: #5e5b53;
  --support: #2ef2ff;
  --support-strong: #0a8e97;
  --support-text: #006570;
  --support-tint: #d3f7f9;
  --on-support: #0e0e0c;
  --player: #ff6b1a;
  --player-strong: #c24a06;
  --player-text: #a13a00;
  --player-tint: #fbe0d0;
  --on-player: #0e0e0c;
  --coach: #0e0e0c;
  --coach-text: var(--ink);
  --coach-tint: #e0dacb;
  --on-coach: #eae5d7;
  --signal: #8a7600;
  --rec: #c8221a;
  --focus-ring: #006570;
  --status-improving: var(--support-text);
  --status-good: var(--ink);
  --status-steady: var(--ink-muted);
  --status-early: var(--ink-subtle);
  --area-game: #c24a06;
  --area-school: #4a4842;
  --area-sports: #0a8e97;
  --area-hobby: #8a7600;
  --area-rest: #a9a498;
  --glow-player: 0 0 0 1px #ff6b1a, 0 6px 18px 0 rgba(194,74,6,0.22);
  --glow-support: 0 0 0 1px #0a8e97, 0 6px 18px 0 rgba(10,142,151,0.2);
  --elev-1: 0 10px 28px 0 rgba(14,14,12,0.12);
  --mark-support: #00a3ad;
}

/* Print and PDF use Paper. Same values as the block above (the token test checks they match). */
@media print {
  :root {
    color-scheme: light;
    --bg: #eae5d7;
    --surface: #f4f1e8;
    --surface-raised: #e0dacb;
    --surface-overlay: #d5cfbf;
    --line: #c9c2b0;
    --line-strong: #7a7568;
    --ink: #0e0e0c;
    --ink-muted: #4a4842;
    --ink-subtle: #5e5b53;
    --support: #2ef2ff;
    --support-strong: #0a8e97;
    --support-text: #006570;
    --support-tint: #d3f7f9;
    --on-support: #0e0e0c;
    --player: #ff6b1a;
    --player-strong: #c24a06;
    --player-text: #a13a00;
    --player-tint: #fbe0d0;
    --on-player: #0e0e0c;
    --coach: #0e0e0c;
    --coach-text: var(--ink);
    --coach-tint: #e0dacb;
    --on-coach: #eae5d7;
    --signal: #8a7600;
    --rec: #c8221a;
    --focus-ring: #006570;
    --status-improving: var(--support-text);
    --status-good: var(--ink);
    --status-steady: var(--ink-muted);
    --status-early: var(--ink-subtle);
    --area-game: #c24a06;
    --area-school: #4a4842;
    --area-sports: #0a8e97;
    --area-hobby: #8a7600;
    --area-rest: #a9a498;
    --glow-player: 0 0 0 1px #ff6b1a, 0 6px 18px 0 rgba(194,74,6,0.22);
    --glow-support: 0 0 0 1px #0a8e97, 0 6px 18px 0 rgba(10,142,151,0.2);
    --elev-1: 0 10px 28px 0 rgba(14,14,12,0.12);
    --mark-support: #00a3ad;
  }
}

:root {
  --space-1: 4px; /* Icon-to-text in pills; hairline gaps. */
  --space-2: 8px; /* Inline gaps, nav item gaps. */
  --space-3: 12px; /* Gap inside stat rows and list items. */
  --space-4: 16px; /* Default gap; phone gutter. */
  --space-6: 24px; /* Card padding on phone; gap between cards. */
  --space-8: 32px; /* Card padding on desktop. */
  --space-12: 48px; /* Gap between page sections. */
  --space-16: 64px; /* Page bottom padding; hero spacing. */
  --radius-xs: 4px; /* HUD tags, chart bars. */
  --radius-sm: 6px; /* Inputs, small chips, ghost buttons. */
  --radius-md: 10px; /* Nav items, list rows, raised boxes. */
  --radius-pill: 999px; /* Status pills, role badges, avatars. */
  --chamfer-sm: 8px; /* Buttons. */
  --chamfer-md: 14px; /* Cards and panels. */
  --chamfer-lg: 24px; /* Hero panels, illustration frames. */
  --icon-stroke: 1.75; /* Icon stroke width on the 24px grid. */
  --tether-dash: 2 6; /* Dash pattern for the tether (support-to-player) lines; round caps. */
  --font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: Barlow, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-hand: Caveat, "Segoe Print", cursive;
  --text-display-xl: 900 88px/0.92 var(--font-display); /* Hero lines. Uppercase. One per screen. */
  --text-display-lg: 800 56px/0.95 var(--font-display); /* Screen titles: the focus skill, the week. */
  --text-display-md: 800 36px/1 var(--font-display); /* Card titles and section heads. */
  --text-stat-xl: 800 76px/1 var(--font-display); /* The one headline number on a card, with its sample under it. */
  --text-stat-md: 700 32px/1 var(--font-display); /* Secondary numbers in stat rows. */
  --text-title: 600 20px/26px var(--font-sans); /* List-item titles, question lines. */
  --text-body-lg: 400 17px/26px var(--font-sans); /* Debriefs and briefs: the sentences people read. */
  --text-body: 400 15px/22px var(--font-sans); /* Default UI text. */
  --text-label: 600 13px/16px var(--font-sans); /* Eyebrows and section labels. Uppercase, letter-spacing 0.08em. */
  --text-caption: 500 13px/18px var(--font-sans); /* Sample sizes, footnotes, chart captions. */
  --text-hud: 500 12px/16px var(--font-mono); /* Machine-voice tags. Uppercase, letter-spacing 0.1em. */
  --text-hud-strong: 700 12px/16px var(--font-mono); /* Emphasis inside HUD strips. */
}

@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }