/* ============================================================
   tokens.css — Design Tokens
   All CSS custom properties: colours, spacing, type, motion.
   Import this file first in every page.
   ============================================================ */

:root {
  /* Colours — light theme */
  --bg: #f5f0e8;
  --bg-alt: #ede8df;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-hi: rgba(255, 255, 255, 0.92);
  --text: #0d0d0d;
  --text-muted: rgba(13, 13, 13, 0.52);
  --accent: #045993;
  --accent-hi: #0670b8;
  --accent-2: #0a2438;
  --border: rgba(10, 36, 56, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.16);

  /* Typography */
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Syne", "Inter", sans-serif;

  /* Spacing scale (8-pt grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.16s;
  --dur-base: 0.28s;
  --dur-slow: 0.6s;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg: #0b0f14;
  --bg-alt: #111820;
  --surface: rgba(18, 26, 38, 0.72);
  --surface-hi: rgba(18, 26, 38, 0.94);
  --text: #eee8dd;
  --text-muted: rgba(238, 232, 221, 0.48);
  --accent: #4fa8e8;
  --accent-hi: #72bdf0;
  --accent-2: #c8dced;
  --border: rgba(200, 220, 237, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}