/* ==========================================================================
   TSA design tokens — extracted from sportsacademy.school
   ========================================================================== */

@font-face {
  font-family: "IntegralCF";
  src: url("../assets/fonts/IntegralCF-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../assets/fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../assets/fonts/DMMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --color-navy: #0a1628;
  --color-navy-muted: #1e3a5f;
  --color-navy-light: #2d4a6f;
  --color-primary: #004aad;
  --color-primary-hover: #003d91;
  --color-primary-light: #e8f1fc;
  --color-accent: #f59e0b;
  --color-accent-hover: #d97706;
  --color-accent-light: #fef3c7;
  --color-accent-glow: rgba(245, 158, 11, 0.25);
  --color-success: #57c99b;
  --color-warning: #f59e0b;
  --color-error: #dc2626;
  /* Red as TEXT on the navy surfaces: --color-error is a fill colour and
     reads at ~3:1 there, under WCAG's 4.5:1; this one clears it. */
  --color-error-text: #f87171;
  /* Amber that reads as text on the navy ground — the accent's text-safe
     twin (the Paper design token; --color-accent itself fails contrast
     for small words). */
  --color-accent-text: #ffc75e;
  /* Blue that reads as TEXT on the navy ground (the Paper "primary-text"
     token): --color-primary is a fill and fails 4.5:1 for small words. The
     value the tile and sidebar links already use. */
  --color-primary-text: #8ab4f8;
  /* The test-mode (violet) and focus-mode (teal) family fills — the same
     values the worded tile pills used, named so the disc marks and the
     sidebar chips draw from one place. */
  --color-test: #8b5cf6;
  --color-focus: #14b8a6;
  --color-info: #0284c7;

  /* Dark-theme surfaces derived from the navy family */
  --surface-base: #0a1628;
  --surface-raised: #101f3a;
  --surface-overlay: #16294a;
  --surface-tile: #0e2038;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text-primary: #f4f6fa;
  --text-muted: #9fb0c8;
  --text-subtle: #64778f;
  --text-inverse: #0a1628;

  /* Typography */
  --font-display: "IntegralCF", "Arial Black", "Helvetica", sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", "JetBrains Mono", monospace;
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* Motion */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Effects */
  --glow-accent: 0 0 20px rgba(245, 158, 11, 0.25);
  --glow-primary: 0 0 20px rgba(0, 74, 173, 0.25);
  --shadow-raised: 0 8px 30px rgba(2, 8, 20, 0.55);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}