/* Design tokens — the ONLY place colours, fonts, radii and shadows are defined.
   The art director fills in every value for this app's direction. Keep every variable name.
   Light values go in :root; dark values in BOTH dark blocks (keep them identical). */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap");

:root {
  color-scheme: light dark;

  /* colour */
  --bg: #FFF4E0;            /* page background — warm cream */
  --surface: #FFFBF3;       /* cards, sheets, inputs */
  --surface-2: #F6E7CB;     /* subtle fills: hover rows, chips, skeletons */
  --text: #1B1A2E;          /* ink, 15.6:1 on --bg */
  --text-muted: #5E5A6E;    /* 6.1:1 on --bg */
  --border: #1B1A2E;        /* thick outlines in the ink colour */
  --accent: #2340E0;        /* cobalt — primary action, home side */
  --accent-contrast: #FFFFFF; /* 7.3:1 on --accent */
  --danger: #D93A1E;        /* tomato — away side, losses, delete (5.8:1 on --surface) */
  --success: #0F7A3D;       /* pitch green — wins and the leader's reward sticker */
  --focus: #2340E0;         /* focus ring colour, visible on --bg and --surface */

  /* type */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --weight-display: 800;
  --tracking-display: -0.03em;
  --case-label: uppercase;        /* none | uppercase */
  --tracking-label: 0.06em;
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-md: 1rem;   --text-lg: 1.25rem;
  --text-xl: 1.875rem; --text-2xl: 3rem;    --text-3xl: 4.5rem;
  --leading: 1.5;

  /* space (4px scale) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --container: 40rem;

  /* shape */
  --radius-s: 10px; --radius-m: 16px; --radius-l: 24px;
  --border-w: 3px;
  --shadow: 4px 4px 0 #1B1A2E;            /* hard offset sticker shadow */
  --shadow-press: 1px 1px 0 var(--text);  /* buttons while pressed: shadow collapses */

  /* motion */
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1B24; --surface: #252734; --surface-2: #31344A; --text: #FFF4E0; --text-muted: #B8B0C8; --border: #E9E1D0;
    --accent: #6B85FF; --accent-contrast: #0B0F2E; --danger: #FF6A4D; --success: #3DDC84; --focus: #6B85FF; --shadow: 4px 4px 0 #000000;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1B24; --surface: #252734; --surface-2: #31344A; --text: #FFF4E0; --text-muted: #B8B0C8; --border: #E9E1D0;
  --accent: #6B85FF; --accent-contrast: #0B0F2E; --danger: #FF6A4D; --success: #3DDC84; --focus: #6B85FF; --shadow: 4px 4px 0 #000000;
}