/* ═══════════════════════════════════════════════════════════════════════
   TOKENS.CSS  —  TIER 1: PRIMITIVE TOKENS  (raw scales, no meaning)
   ───────────────────────────────────────────────────────────────────────
   The single source of raw design values for the Beez design system.
   • Colors are OKLCH (perceptually uniform, wide-gamut, contrast-friendly).
   • Primitives carry NO semantic meaning — never reference them directly in
     component CSS. Map them through semantic tokens (semantic.css) instead.
   • Three-tier model:  tokens.css (this) → semantic.css → component tokens.

   Load order (root index.html):  tokens.css FIRST, then semantic.css.
   These are theme-independent: they do not change between light / dark / brand.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Color · neutral ramp (pure, chroma 0) ─────────────────────────
       Anchors derived from the existing palette: gray-0 = #fff,
       gray-100 = #f5f5f5, gray-1000 = #000 (exact sRGB→OKLCH). */
    --ds-gray-0:    oklch(100% 0 0);
    --ds-gray-50:   oklch(98% 0 0);
    --ds-gray-100:  oklch(97.02% 0 0);   /* = #f5f5f5 */
    --ds-gray-200:  oklch(92% 0 0);
    --ds-gray-300:  oklch(87% 0 0);
    --ds-gray-400:  oklch(74% 0 0);
    --ds-gray-500:  oklch(62% 0 0);
    --ds-gray-600:  oklch(50% 0 0);
    --ds-gray-700:  oklch(39% 0 0);
    --ds-gray-800:  oklch(27% 0 0);
    --ds-gray-900:  oklch(17% 0 0);
    --ds-gray-950:  oklch(10% 0 0);
    --ds-gray-1000: oklch(0% 0 0);

    /* ─── Color · slate ramp (cool-tinted neutrals for dark UI) ──────────
       slate-700 = #323D4E, slate-800 ≈ #1a1a2e (exact anchors). */
    --ds-slate-600: oklch(45% 0.030 259);
    --ds-slate-700: oklch(35.74% 0.0331 258.98);  /* = #323D4E */
    --ds-slate-800: oklch(22.84% 0.0384 282.93);  /* ≈ #1a1a2e */
    --ds-slate-900: oklch(16% 0.030 283);

    /* ─── Color · violet ramp (brand primary — #7300e7 / #681EEB) ────────
       violet-500 = #7300e7 (brand), violet-550 = #681EEB (light accent). */
    --ds-violet-50:   oklch(96% 0.022 293);
    --ds-violet-100:  oklch(92% 0.050 293);
    --ds-violet-200:  oklch(86% 0.100 293);
    --ds-violet-300:  oklch(78% 0.160 293);
    --ds-violet-400:  oklch(64% 0.230 293);
    --ds-violet-500:  oklch(49.19% 0.2720 293.82);  /* = #7300e7 */
    --ds-violet-550:  oklch(49.59% 0.2654 288.25);  /* = #681EEB */
    --ds-violet-600:  oklch(44% 0.255 293);
    --ds-violet-700:  oklch(38% 0.220 293);
    --ds-violet-800:  oklch(32% 0.175 293);
    --ds-violet-900:  oklch(26% 0.130 293);

    /* ─── Color · sky ramp (dark-theme accent — #57B9FF) ─────────────────
       sky-400 = #57B9FF. */
    --ds-sky-50:   oklch(97% 0.018 243);
    --ds-sky-100:  oklch(93% 0.040 243);
    --ds-sky-200:  oklch(88% 0.070 243);
    --ds-sky-300:  oklch(82% 0.100 243);
    --ds-sky-400:  oklch(75.64% 0.1365 242.66);   /* = #57B9FF */
    --ds-sky-500:  oklch(68% 0.155 243);
    --ds-sky-600:  oklch(60% 0.170 245);
    --ds-sky-700:  oklch(52% 0.160 248);
    --ds-sky-800:  oklch(42% 0.130 250);
    --ds-sky-900:  oklch(32% 0.100 252);

    /* ─── Color · pink ramp (brand accent — #FF00CC) ─────────────────────
       pink-500 = #FF00CC. */
    --ds-pink-300:  oklch(82% 0.160 340);
    --ds-pink-400:  oklch(75% 0.230 340);
    --ds-pink-500:  oklch(67.45% 0.2926 340.37);  /* = #FF00CC */
    --ds-pink-600:  oklch(60% 0.270 342);
    --ds-pink-700:  oklch(52% 0.230 344);

    /* ─── Color · status ramps ──────────────────────────────────────────
       Anchored to the existing toast / utility colors where present. */
    --ds-green-300: oklch(83.62% 0.1277 134.93);  /* = #a5dc86 (toast ok) */
    --ds-green-400: oklch(72% 0.160 150);
    --ds-green-500: oklch(64% 0.170 150);
    --ds-green-600: oklch(55% 0.150 150);

    --ds-red-300:   oklch(78% 0.130 22);
    --ds-red-400:   oklch(70.70% 0.1556 21.83);   /* = #f27474 (toast err) */
    --ds-red-500:   oklch(58% 0.220 27);
    --ds-red-600:   oklch(51% 0.210 27);

    --ds-amber-400: oklch(82% 0.150 75);
    --ds-amber-500: oklch(75.88% 0.1651 63.50);   /* = #f8961e */
    --ds-amber-600: oklch(68% 0.160 60);

    --ds-blue-400:  oklch(68% 0.180 255);
    --ds-blue-500:  oklch(57.82% 0.2282 260.03);  /* = #0d6efd */
    --ds-blue-600:  oklch(50% 0.215 262);

    /* ─── Spacing scale (4px base) ──────────────────────────────────────── */
    --ds-space-0:   0;
    --ds-space-1:   0.25rem;   /*  4px */
    --ds-space-2:   0.5rem;    /*  8px */
    --ds-space-3:   0.75rem;   /* 12px */
    --ds-space-4:   1rem;      /* 16px */
    --ds-space-5:   1.25rem;   /* 20px */
    --ds-space-6:   1.5rem;    /* 24px */
    --ds-space-8:   2rem;      /* 32px */
    --ds-space-10:  2.5rem;    /* 40px */
    --ds-space-12:  3rem;      /* 48px */
    --ds-space-16:  4rem;      /* 64px */

    /* ─── Radii ─────────────────────────────────────────────────────────── */
    --ds-radius-xs:   4px;
    --ds-radius-sm:   6px;
    --ds-radius-md:   10px;
    --ds-radius-lg:   14px;
    --ds-radius-xl:   20px;
    --ds-radius-2xl:  28px;
    --ds-radius-full: 9999px;

    /* ─── Typography ────────────────────────────────────────────────────── */
    --ds-font-sans: 'Sora', 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --ds-font-mono: 'JetBrains Mono', 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace;

    --ds-font-size-xs:   0.75rem;
    --ds-font-size-sm:   0.875rem;
    --ds-font-size-base: 1rem;
    --ds-font-size-lg:   1.125rem;
    --ds-font-size-xl:   1.25rem;
    --ds-font-size-2xl:  1.5rem;
    --ds-font-size-3xl:  1.875rem;
    --ds-font-size-4xl:  2.25rem;

    --ds-font-weight-light:    300;
    --ds-font-weight-regular:  400;
    --ds-font-weight-medium:   500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold:     700;

    --ds-line-height-tight:   1.2;
    --ds-line-height-normal:  1.5;
    --ds-line-height-relaxed: 1.7;

    /* ─── Page layout (single source for page gutters / width) ────────────
       Consumed by `.container.scale` (src/styles/wide-layout.css) and the
       site header (App.css .header-inner). Mobile (<992px) keeps Bootstrap's
       default .container gutter; these apply at >=992px. --page-padding-x
       steps up to 40px at >=1400px (override below the :root block). */
    --page-padding-x: 28px;
    --page-max-width: min(1920px, 96vw);

    /* ─── Elevation (shadows) — neutral, theme-independent ───────────────── */
    --ds-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.08);
    --ds-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.10), 0 1px 2px oklch(0% 0 0 / 0.06);
    --ds-shadow-md: 0 4px 12px oklch(0% 0 0 / 0.12), 0 2px 4px oklch(0% 0 0 / 0.06);
    --ds-shadow-lg: 0 12px 28px oklch(0% 0 0 / 0.16), 0 4px 10px oklch(0% 0 0 / 0.08);
    --ds-shadow-xl: 0 24px 48px oklch(0% 0 0 / 0.22), 0 8px 16px oklch(0% 0 0 / 0.10);

    /* ─── Blur ──────────────────────────────────────────────────────────── */
    --ds-blur-sm: 4px;
    --ds-blur-md: 8px;
    --ds-blur-lg: 16px;
    --ds-blur-xl: 24px;

    /* ─── Z-index scale ─────────────────────────────────────────────────── */
    --ds-z-base:     1;
    --ds-z-dropdown: 1000;
    --ds-z-sticky:   1100;
    --ds-z-overlay:  1200;
    --ds-z-modal:    1300;
    --ds-z-popover:  1400;
    --ds-z-tooltip:  1500;
    --ds-z-toast:    1600;

    /* ─── Motion ────────────────────────────────────────────────────────── */
    --ds-duration-instant: 80ms;
    --ds-duration-fast:    120ms;
    --ds-duration-base:    200ms;
    --ds-duration-slow:    320ms;

    --ds-ease-standard:    cubic-bezier(0.2, 0, 0, 1);
    --ds-ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);
    --ds-ease-decelerate:  cubic-bezier(0, 0, 0, 1);
    --ds-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Wider desktop gutter — single knob for the page side padding step-up. */
@media (min-width: 1400px) {
    :root { --page-padding-x: 40px; }
}