/*
  Design tokens — transcribed directly from design-foundations.md (the real one,
  supplied alongside the clickable prototype) and the prototype's own CSS variables,
  so this file and the prototype agree exactly rather than being a re-derivation.
*/

:root {
  color-scheme: light dark;

  /* ---------- Surfaces & text (light) ---------- */
  --bg: #e7e7ec;
  --surface: #f6f6f8;
  --raised: #ffffff;
  --sunken: #ececf1;
  --text: #16161a;
  --text2: #5b5b66;
  --text3: #9a9aa6;

  /* ---------- Semantic colour (light) ---------- */
  --accent: #ff0101;
  --success: #1e9e6a;
  --error: #e8590c;
  --control: #16161a;
  --controltext: #f6f6f8;

  /* ---------- Elevation (light) ---------- */
  --low: 0 1px 3px rgba(20, 20, 35, 0.05);
  --high: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 44px rgba(20, 20, 35, 0.06);

  /* ---------- Type ---------- */
  --font-family-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-kicker: 11px;
  --text-label: 13px;
  --text-mono: 13px;
  --text-body: 15px;
  --text-section: 19px;
  --text-subtitle: 21px;
  --text-alt-title: 24px;
  --text-title: 26px;
  --text-page-title: 30px;
  --text-display: 34px;
  --text-hero: 58px;

  /* ---------- Spacing — 4px base ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---------- Radius ---------- */
  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 20px;
  --radius-4: 28px;
  --radius-full: 999px;

  --touch-target-min: 44px;
}

/* ---------- Surfaces, text, colour, elevation (dark) ----------
   Guarded so an explicit data-theme="light" always wins over prefers-color-scheme,
   and an explicit data-theme="dark" always wins regardless of system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0e12;
    --surface: #1a1a22;
    --raised: #262630;
    --sunken: #1a1a22;
    --text: #f4f4f6;
    --text2: #a0a0ad;
    --text3: #6b6b78;

    --accent: #ff4d4d;
    --success: #3fd49a;
    --error: #ffa94d;
    --control: #f4f4f6;
    --controltext: #0e0e12;

    --low: 0 1px 3px rgba(0, 0, 0, 0.35);
    --high: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 44px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e12;
  --surface: #1a1a22;
  --raised: #262630;
  --sunken: #1a1a22;
  --text: #f4f4f6;
  --text2: #a0a0ad;
  --text3: #6b6b78;

  --accent: #ff4d4d;
  --success: #3fd49a;
  --error: #ffa94d;
  --control: #f4f4f6;
  --controltext: #0e0e12;

  --low: 0 1px 3px rgba(0, 0, 0, 0.35);
  --high: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 44px rgba(0, 0, 0, 0.45);
}