/*
 * Design tokens — the only file in the app allowed to contain a hex colour.
 * Values lifted from /mockups (dark boards + client-Light). Names describe roles, never colours.
 *
 * Theme: follows the OS by default. <html data-theme="light|dark"> overrides it.
 * The dark palette is written twice (OS media query + explicit attribute) because Safari 17.0–17.4
 * lacks light-dark(). TokensTest fails if the two copies ever drift.
 *
 * Breakpoints (custom properties cannot be used inside @media — write these as literals):
 *   1280px  coach floor (1280 × 720)
 *   1440px  coach design target (1440 × 800)
 *   1680px  wide
 */

:root {
  color-scheme: light dark;

  /* Fonts — self-hosted variable woff2, see base.css */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  /* Font sizes, one per size used in the mockups */
  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-28: 28px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-44: 44px;
  --text-48: 48px;
  --text-56: 56px;
  --text-72: 72px;
  --text-96: 96px;

  /* Line heights, on the 4 px grid (the mockups' 22 px became 24 px) */
  --leading-16: 16px;
  --leading-20: 20px;
  --leading-24: 24px;
  --leading-28: 28px;
  --leading-32: 32px;
  --leading-36: 36px;
  --leading-40: 40px;
  --leading-44: 44px;
  --leading-48: 48px;
  --leading-72: 72px;
  --leading-88: 88px;

  /* Tracking, whole pixels only. Mockup values rounded:
     -1.2/-0.8 → -1 · -0.4/0.4 → 0 · 0.8/1/1.2 → 1 · 1.4/1.6/2 → 2 */
  --tracking-tight: -1px;
  --tracking-normal: 0;
  --tracking-wide: 1px;
  --tracking-wider: 2px;
  --tracking-widest: 3px;        /* THOMAS wordmark, phone */
  --tracking-brand: 4px;         /* THOMAS wordmark, desktop */
  --tracking-display: -2px;      /* 48 px headline */
  --tracking-display-xl: -4px;   /* 96 px headline */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Spacing — 8 px grid; 4 and 12 only inside components */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 9999px;

  --border-width: 1px;

  /* Layout */
  --rail-expanded: 240px;
  --rail-collapsed: 64px;
  --pane-left: 600px;
  --drawer-width: 560px;
  --measure: 720px;
  --control-size: 40px;

  /* Colours identical in both themes */
  --color-accent: #C8F751;
  --color-on-accent: #0B0B0C;
  --color-difficulty-easy: #34D399;
  --color-difficulty-medium: #FBBF24;
  --color-difficulty-hard: #F87171;
  --color-on-difficulty: #0B0B0C;
  /* Same hex as the difficulty triad today, different meaning: free to diverge */
  --color-alert: #F87171;
  --color-warning: #FBBF24;
  --color-on-alert: #0B0B0C;
  /* The photo panel on the sign-in pages is dark in both themes (decision 166) */
  --color-photo-bg: #0B0B0C;
  --color-photo-text: #F5F5F4;
  --color-photo-text-muted: #9A9AA2;

  /* Light (default when the OS gives no preference) */
  --color-bg: #F7F7F5;
  --color-surface: #FFFFFF;
  --color-surface-raised: #EFEFEC;
  --color-surface-sunken: #FBFBFA;
  --color-border: #E2E2DE;
  --color-text: #131315;
  --color-text-muted: #5E5E66;
  --color-text-subtle: #8A8A92;
  --color-accent-text: #4C6B00;
  --color-accent-text-hover: #3A5200;
  /* Lifts chart lines (T-09b, mockup client-Performance): lime, text, grey. On light, lime is
     too faint on white, so the first line takes the accent's text colour. */
  --color-chart-1: var(--color-accent-text);
  --color-chart-2: var(--color-text);
  --color-chart-3: var(--color-text-subtle);
  --color-chart-grid: var(--color-surface-raised);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0B0B0C;
    --color-surface: #141416;
    --color-surface-raised: #1C1C20;
    --color-surface-sunken: #0F0F11;
    --color-border: #2A2A30;
    --color-text: #F5F5F4;
    --color-text-muted: #9A9AA2;
    --color-text-subtle: #5E5E66;
    --color-accent-text: #D7FB7A;
    --color-accent-text-hover: #C8F751;
    --color-chart-1: var(--color-accent);
    --color-chart-2: var(--color-text);
    --color-chart-3: var(--color-text-subtle);
    --color-chart-grid: var(--color-surface-raised);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0B0B0C;
  --color-surface: #141416;
  --color-surface-raised: #1C1C20;
  --color-surface-sunken: #0F0F11;
  --color-border: #2A2A30;
  --color-text: #F5F5F4;
  --color-text-muted: #9A9AA2;
  --color-text-subtle: #5E5E66;
  --color-accent-text: #D7FB7A;
  --color-accent-text-hover: #C8F751;
  --color-chart-1: var(--color-accent);
  --color-chart-2: var(--color-text);
  --color-chart-3: var(--color-text-subtle);
  --color-chart-grid: var(--color-surface-raised);
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #F7F7F5;
  --color-surface: #FFFFFF;
  --color-surface-raised: #EFEFEC;
  --color-surface-sunken: #FBFBFA;
  --color-border: #E2E2DE;
  --color-text: #131315;
  --color-text-muted: #5E5E66;
  --color-text-subtle: #8A8A92;
  --color-accent-text: #4C6B00;
  --color-accent-text-hover: #3A5200;
  --color-chart-1: var(--color-accent-text);
  --color-chart-2: var(--color-text);
  --color-chart-3: var(--color-text-subtle);
  --color-chart-grid: var(--color-surface-raised);
}