/* ============================================================
 * base.css — modern reset + primitive design tokens
 *
 * Tokens defined here are NEVER referenced directly by markup.
 * They are the raw palette consumed by theme.css to produce
 * semantic tokens (--surface-1, --text-primary, --accent, ...).
 *
 * To change the palette: edit primitives here.
 * To change theme intent: edit theme.css.
 * To change utility coverage: edit utilities.css.
 * ============================================================ */

/* --- Modern reset ----------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { height: 100%; overscroll-behavior: none; }
body { min-height: 100%; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font: inherit; font-weight: inherit; }

table { border-collapse: collapse; }

/* --- Primitive tokens ------------------------------------- */

:root {
  /* Color scales (OKLCH — perceptually uniform).
     Neutral + 4 accents across 50→950 stops. */

  --gray-50:  oklch(98% 0 0);
  --gray-100: oklch(96% 0 0);
  --gray-200: oklch(92% 0 0);
  --gray-300: oklch(86% 0 0);
  --gray-400: oklch(74% 0 0);
  --gray-500: oklch(60% 0 0);
  --gray-600: oklch(50% 0 0);
  --gray-700: oklch(40% 0 0);
  --gray-800: oklch(28% 0 0);
  --gray-900: oklch(20% 0 0);
  --gray-950: oklch(15% 0 0);

  --blue-50:  oklch(97% 0.02 240);
  --blue-100: oklch(94% 0.04 240);
  --blue-200: oklch(89% 0.08 240);
  --blue-300: oklch(82% 0.12 240);
  --blue-400: oklch(72% 0.16 240);
  --blue-500: oklch(60% 0.18 240);
  --blue-600: oklch(52% 0.20 240);
  --blue-700: oklch(44% 0.18 240);
  --blue-800: oklch(36% 0.14 240);
  --blue-900: oklch(28% 0.10 240);
  --blue-950: oklch(20% 0.08 240);

  --red-100: oklch(94% 0.04 25);
  --red-300: oklch(82% 0.12 25);
  --red-500: oklch(60% 0.22 25);
  --red-600: oklch(52% 0.22 25);
  --red-700: oklch(44% 0.20 25);
  --red-900: oklch(28% 0.12 25);

  --green-100: oklch(94% 0.04 145);
  --green-300: oklch(82% 0.10 145);
  --green-500: oklch(64% 0.16 145);
  --green-600: oklch(56% 0.16 145);
  --green-700: oklch(48% 0.14 145);
  --green-900: oklch(28% 0.08 145);

  --amber-100: oklch(95% 0.04 75);
  --amber-300: oklch(86% 0.10 75);
  --amber-400: oklch(80% 0.16 75);
  --amber-500: oklch(72% 0.18 75);
  --amber-700: oklch(50% 0.14 75);

  /* Spacing scale (rem-based) */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Radii */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadow recipe — geometry only. The color/alpha live in theme.css so
     dark mode can crank the opacity (shadows on dark surfaces need more
     ink to be visible than on white). Markup never references these. */
  --shadow-color: 0 0 0;

  /* Z-index scale */
  --z-base:     0;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-popover:  50;
  --z-toast:    60;

  /* Motion */
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  320ms;
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);
}