/* LAT 1223 theme tokens (docs/site-ui.md §2–3). The only place colours,
   type sizes and radii are defined. */

@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("/assets/fonts/Aspekta-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* colour */
  --bg: #050505;
  --surface: #111111;
  --surface-glass: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .22);
  --text: #FFFFFF;
  --text-2: #999999;
  --ink: #111111;              /* text on white cards */
  --ink-2: #4B4B4B;
  --accent-from: #06B6D4;
  --accent-to: #EC4899;
  --accent: linear-gradient(to right, var(--accent-from), var(--accent-to));
  --glow: #7C3AED;
  --deep: #0B0216;
  --calc: #1A0B2E;
  --track: #374151;
  --live: #EF4444;
  --win-red: #FF5F57; --win-yellow: #FEBC2E; --win-green: #28C840;

  /* type */
  --font: "Aspekta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.5rem, 6.4vw, 7.25rem);   /* hero H1: 9-word headline, see spec §1 */
  --fs-mega: clamp(5rem, 22vw, 22rem);           /* decorative wordmarks */
  --fs-section: clamp(2.25rem, 8vw, 8rem);
  --fs-card: clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-stat: clamp(2rem, 4.2vw, 3.5rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-small: .875rem;
  --fs-label: .8125rem;
  --fs-btn: .9375rem;
  --track-tight: -0.04em;
  --track-label: 0.2em;

  /* shape + space */
  --radius-card: 24px;
  --radius-calc: 32px;
  --radius-btn: 999px;
  --blur: 8px;
  --container: 90rem;
  --gutter: clamp(16px, 4vw, 2rem);
  --section-y: clamp(32px, 3vw, 44px);
  --ease: .2s ease;
}