/* Generated by packages/design-system/build_tokens.py from tokens.json. Do not edit. */
/* ShuttleIQ tokens v1 */

:root {
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

:root {
  --surface-0: #0e1418;
  --surface-1: #16202a;
  --surface-2: #1f2b36;
  --line: #2e3c48;
  --line-strong: #5c6e7c;
  --ink: #eef2f0;
  --ink-muted: #a7b4b9;
  --ink-disabled: #6a7881;
  --brand: #4fd1a9;
  --brand-strong: #7fe3c3;
  --brand-tint: #17352f;
  --on-brand: #0e1418;
  --accent: #d6ff4f;
  --on-accent: #10191f;
  --accent-ink: #d6ff4f;
  --good: #4fd3e3;
  --warn: #f2b84b;
  --critical: #ff8a7a;
  --focus: #8ab4ff;
  --court-fill: #1d5e45;
  --court-line: #dbe9e1;
  --court-net: #eef2f0;
  --skill-smash: #ff7a59;
  --skill-clear: #6fb3ff;
  --skill-drop: #c99cff;
  --skill-net: #ff8ad4;
  --skill-drive: #ffd166;
  --skill-serve: #e0e6e3;
  --overlay: #000000b3;
  --shadow-card: 0 1px 0 #ffffff0a, 0 8px 24px #00000066;
}

:root[data-theme="dark"] {
  --surface-0: #0e1418;
  --surface-1: #16202a;
  --surface-2: #1f2b36;
  --line: #2e3c48;
  --line-strong: #5c6e7c;
  --ink: #eef2f0;
  --ink-muted: #a7b4b9;
  --ink-disabled: #6a7881;
  --brand: #4fd1a9;
  --brand-strong: #7fe3c3;
  --brand-tint: #17352f;
  --on-brand: #0e1418;
  --accent: #d6ff4f;
  --on-accent: #10191f;
  --accent-ink: #d6ff4f;
  --good: #4fd3e3;
  --warn: #f2b84b;
  --critical: #ff8a7a;
  --focus: #8ab4ff;
  --court-fill: #1d5e45;
  --court-line: #dbe9e1;
  --court-net: #eef2f0;
  --skill-smash: #ff7a59;
  --skill-clear: #6fb3ff;
  --skill-drop: #c99cff;
  --skill-net: #ff8ad4;
  --skill-drive: #ffd166;
  --skill-serve: #e0e6e3;
  --overlay: #000000b3;
  --shadow-card: 0 1px 0 #ffffff0a, 0 8px 24px #00000066;
}

:root[data-theme="light"] {
  --surface-0: #f6f8f4;
  --surface-1: #ffffff;
  --surface-2: #eaefe6;
  --line: #d4dbd1;
  --line-strong: #7d8b86;
  --ink: #10191f;
  --ink-muted: #4c5b63;
  --ink-disabled: #8d9a9f;
  --brand: #0b6b55;
  --brand-strong: #084f3f;
  --brand-tint: #dff3ea;
  --on-brand: #ffffff;
  --accent: #c8f135;
  --on-accent: #10191f;
  --accent-ink: #5a7500;
  --good: #0b6f80;
  --warn: #9a5b00;
  --critical: #b8301f;
  --focus: #1f5fff;
  --court-fill: #2f9c6c;
  --court-line: #ffffff;
  --court-net: #10191f;
  --skill-smash: #d9471f;
  --skill-clear: #1f63c6;
  --skill-drop: #6e3fb8;
  --skill-net: #a8307f;
  --skill-drive: #8f6400;
  --skill-serve: #50605f;
  --overlay: #10191f80;
  --shadow-card: 0 1px 2px #10191f14, 0 8px 24px #10191f14;
}

html, body { background: var(--surface-0); color: var(--ink); }

.display-xl { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.headline { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
.title { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 500; }
.body-sm { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 500; }
.label { font-family: var(--font-text); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.button { font-family: var(--font-text); font-size: 16px; line-height: 20px; font-weight: 700; }
.stat-xl { font-family: var(--font-mono); font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat { font-family: var(--font-mono); font-size: 22px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-sm { font-family: var(--font-mono); font-size: 14px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }