:root {
  /* Colors (neutral grey base) */
  --bg: #f4f4f5;           /* page background */
  --fg: #111111;           /* default text */
  --muted: #6b7280;        /* secondary text */
  --line: #e5e7eb;         /* dividers/borders */
  --accent: #00a0ff;       /* brand accent */
  --accent-contrast: #fff; /* text/icon on accent */

  /* Semantic surfaces (grey base) */
  --surface-1: #f4f4f5;  /* page bg */
  --surface-2: #ffffff;  /* cards, nav, overlay */
  --surface-3: #f9fafb;  /* slightly raised */
  --surface-contrast: #111111;
  --border: #e5e7eb;

  /* Component-specific helpers */
  --chip-bg: #f4f4f5;
  --chip-text: #111111;
  --tile-bg: #f9fafb;

  /* Spacing scale (8pt w/ half step) */
  --s-2: 2px;
  --s-1: 4px;
  --s0: 8px;
  --s1: 12px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  /* Typography */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-2: 11px;
  --fs-1: 12px;
  --fs0: 14px;
  --fs1: 16px;
  --fs2: 18px;
  --fs3: 24px;
  --fs4: 32px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --letter-tight: -0.01em;

  /* Layout / sizing */
  --container: 1240px;
  --header-h: 64px;    /* navbar height */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --ring: 0 0 0 2px rgba(0,160,255,.35);

  /* Elevation */
  --shadow-sm: 0 6px 16px rgba(0,0,0,.04);
  --shadow:   0 10px 30px rgba(0,0,0,.06);
  --shadow-lg:0 20px 40px rgba(0,0,0,.08);

  /* Motion */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-emph: cubic-bezier(.2,.8,0,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 300ms;

  /* z-index */
  --z-nav: 1000;
  --z-overlay: 1200;
  --z-toast: 1400;

  /* Breakpoints */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}