/* ============================================================
   @voidable/theme — Tier 1 Primitives
   Raw scales only. No semantic meaning.
   ============================================================ */

/* Type --void-anim-scale so per-element inline overrides
   (style="--void-anim-scale: 2") cascade reliably. Other animation
   tokens stay untyped so their calc() expressions resolve lazily at
   the consumer site, picking up local scale overrides. */
@property --void-anim-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

:root {
  /* ── Stone palette ── */
  --void-stone-50:  #fafaf9;
  --void-stone-100: #f5f5f4;
  --void-stone-200: #e7e5e4;
  --void-stone-300: #d6d3d1;
  --void-stone-400: #a8a29e;
  --void-stone-450: #908a85;
  --void-stone-500: #78716c;
  --void-stone-600: #57534e;
  --void-stone-700: #44403c;
  --void-stone-800: #292524;
  --void-stone-900: #1c1917;
  --void-stone-950: #0c0a09;

  /* ── Red palette (status: error) ── */
  --void-red-50:  #fef2f2;
  --void-red-100: #fee2e2;
  --void-red-200: #fecaca;
  --void-red-300: #fca5a5;
  --void-red-400: #f87171;
  --void-red-500: #ef4444;
  --void-red-600: #dc2626;
  --void-red-700: #b91c1c;
  --void-red-800: #991b1b;
  --void-red-900: #7f1d1d;
  --void-red-950: #450a0a;

  /* ── Amber palette (status: caution) ── */
  --void-amber-50:  #fefae4;
  --void-amber-100: #fdf1be;
  --void-amber-200: #f9e182;
  --void-amber-300: #f1cb48;
  --void-amber-400: #e5c03c;
  --void-amber-500: #cca93c;
  --void-amber-600: #a88a2a;
  --void-amber-700: #846b20;
  --void-amber-800: #655118;
  --void-amber-900: #503f13;
  --void-amber-950: #30260b;

  /* ── Orange palette (status: warning) ── */
  --void-orange-50:  #fff7ed;
  --void-orange-100: #ffedd5;
  --void-orange-200: #fed7aa;
  --void-orange-300: #fdba74;
  --void-orange-400: #fb923c;
  --void-orange-500: #f97316;
  --void-orange-600: #ea580c;
  --void-orange-700: #c2410c;
  --void-orange-800: #9a3412;
  --void-orange-900: #7c2d12;
  --void-orange-950: #431407;

  /* ── Green palette (status: success) ── */
  --void-green-50:  #f0fdf4;
  --void-green-100: #dcfce7;
  --void-green-200: #bbf7d0;
  --void-green-300: #86efac;
  --void-green-400: #4ade80;
  --void-green-500: #22c55e;
  --void-green-600: #16a34a;
  --void-green-700: #15803d;
  --void-green-800: #166534;
  --void-green-900: #14532d;
  --void-green-950: #052e16;

  /* ── Blue palette (status: info) ── */
  --void-blue-50:  #eff6ff;
  --void-blue-100: #dbeafe;
  --void-blue-200: #bfdbfe;
  --void-blue-300: #93c5fd;
  --void-blue-400: #60a5fa;
  --void-blue-500: #3b82f6;
  --void-blue-600: #2563eb;
  --void-blue-700: #1d4ed8;
  --void-blue-800: #1e40af;
  --void-blue-900: #1e3a8a;
  --void-blue-950: #172554;

  /* ── Purple palette (status: notice) ── */
  --void-purple-50:  #faf5ff;
  --void-purple-100: #f3e8ff;
  --void-purple-200: #e9d5ff;
  --void-purple-300: #d8b4fe;
  --void-purple-400: #c084fc;
  --void-purple-500: #a855f7;
  --void-purple-600: #9333ea;
  --void-purple-700: #7e22ce;
  --void-purple-800: #6b21a8;
  --void-purple-900: #581c87;
  --void-purple-950: #3b0764;

  /* ── Pink palette (status: highlight) ── */
  --void-pink-50:  #fdf2f8;
  --void-pink-100: #fce7f3;
  --void-pink-200: #fbcfe8;
  --void-pink-300: #f9a8d4;
  --void-pink-400: #f472b6;
  --void-pink-500: #ec4899;
  --void-pink-600: #db2777;
  --void-pink-700: #be185d;
  --void-pink-800: #9d174d;
  --void-pink-900: #831843;
  --void-pink-950: #500724;

  /* ── Pure black & white ── */
  --void-black: #000000;
  --void-white: #ffffff;

  /* ── Dark surface steps (near-blacks for elevation) ── */
  --void-dark-1: #0a0a0a;
  --void-dark-2: #0b0b0b;
  --void-dark-3: #111111;
  --void-dark-4: #141414;

  /* ── Spacing (rem) ── */
  --void-space-1:  0.25rem;
  --void-space-1h: 0.375rem;
  --void-space-2:  0.5rem;
  --void-space-2h: 0.625rem;
  --void-space-3:  0.75rem;
  --void-space-4:  1rem;
  --void-space-5:  1.25rem;
  --void-space-6:  1.5rem;
  --void-space-7:  1.75rem;
  --void-space-8:  2rem;
  --void-space-9:  2.25rem;
  --void-space-10: 2.5rem;
  --void-space-12: 3rem;
  --void-space-14: 3.5rem;
  --void-space-15: 3.75rem;
  --void-space-16: 4rem;
  --void-space-20: 5rem;
  --void-space-24: 6rem;
  --void-space-28: 7rem;
  --void-space-30: 7.5rem;
  --void-space-32: 8rem;
  --void-space-35: 8.75rem;
  --void-space-40: 10rem;

  --void-space-xs: var(--void-space-1);
  --void-space-sm: var(--void-space-2);
  --void-space-md: var(--void-space-3);
  --void-space-lg: var(--void-space-4);
  --void-space-xl: var(--void-space-6);

  /* ── Typography — sizes ── */
  --void-text-2xs:  0.625rem;
  --void-text-xs:   0.75rem;
  --void-text-sm:   0.8125rem;
  --void-text-base: 0.875rem;
  --void-text-md:   1rem;
  --void-text-lg:   1.125rem;
  --void-text-xl:   1.25rem;
  --void-text-2xl:  1.5rem;
  --void-text-3xl:  1.875rem;
  --void-text-4xl:  2.25rem;
  --void-text-5xl:  3rem;

  /* ── Typography — weights ── */
  --void-weight-normal:   400;
  --void-weight-medium:   500;
  --void-weight-semibold: 600;
  --void-weight-bold:     700;

  /* ── Typography — line heights ── */
  --void-leading-display: 0.92;
  --void-leading-none:    1;
  --void-leading-snug:    1.05;
  --void-leading-tight:   1.2;
  --void-leading-normal:  1.5;
  --void-leading-relaxed: 1.7;
  --void-leading-loose:   1.75;

  /* ── Typography — letter spacing (tracking) ── */
  --void-tracking-tightest: -0.05em;
  --void-tracking-tighter:  -0.04em;
  --void-tracking-tight:    -0.025em;
  --void-tracking-snug:     -0.01em;
  --void-tracking-normal:   0em;
  --void-tracking-wide:     0.04em;
  --void-tracking-wider:    0.06em;
  --void-tracking-widest:   0.1em;

  /* ── Font stacks ── */
  --void-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --void-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;

  /* ── Border radius ── */
  --void-radius-none: 0;
  --void-radius-xs:   4px;
  --void-radius-sm:   6px;
  --void-radius-md:   8px;
  --void-radius-lg:   12px;
  --void-radius-xl:   16px;
  --void-radius-full: 9999px;

  /* ── Shadows — white glows (dark-surface elevation) ── */
  --void-shadow-sm: 0 1px 3px rgba(255,255,255,.14);
  --void-shadow-md: 0 2px 6px rgba(255,255,255,.12), 0 10px 24px rgba(255,255,255,.20);
  --void-shadow-lg: 0 4px 10px rgba(255,255,255,.16), 0 22px 50px rgba(255,255,255,.28);
  --void-shadow-xl: 0 6px 14px rgba(255,255,255,.20), 0 40px 88px rgba(255,255,255,.38);

  /* ── Ring hairlines ── */
  --void-ring-hair:        0 0 0 1px rgba(255,255,255,.06);
  --void-ring-hair-strong: 0 0 0 1px rgba(255,255,255,.12);

  /* ── Motion — durations
       All durations scale with --void-anim-scale (1 = default, 0 = off).
       Override per-element via inline style="--void-anim-scale: N" or
       page-wide via <html data-anim-speed="…"> below. */
  --void-anim-scale:      1;
  --void-duration-fast:   calc(100ms * var(--void-anim-scale));
  --void-duration-normal: calc(200ms * var(--void-anim-scale));
  --void-duration-slow:   calc(300ms * var(--void-anim-scale));

  /* Chart-specific base durations — consumed by JS rAF loops.
       JS reads these as plain values, then multiplies by the
       cascaded --void-anim-scale at the element's site. (Calc'd
       tokens would break parseFloat in getComputedStyle.) */
  --void-duration-chart-enter: 700ms;
  --void-stagger-chart-bars:   40ms;

  /* Chart series palette — cycle for multi-series charts */
  --void-chart-series-1: var(--void-color-accent);
  --void-chart-series-2: var(--void-color-info);
  --void-chart-series-3: var(--void-color-success);
  --void-chart-series-4: var(--void-color-warning);
  --void-chart-series-5: var(--void-color-error);
  --void-chart-series-6: var(--void-color-notice);

  /* Chart structural colors */
  --void-chart-grid:       color-mix(in srgb, var(--void-color-border) 60%, transparent);
  --void-chart-axis:       var(--void-color-border-strong);
  --void-chart-tick-label: var(--void-color-text-muted);

  /* ── Motion — easings ── */
  --void-ease-in:     cubic-bezier(0.4, 0, 1, 0.2);
  --void-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --void-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index layers ── */
  --void-z-dropdown: 100;
  --void-z-sticky:   200;
  --void-z-modal:    300;
  --void-z-toast:    400;
  --void-z-tooltip:  500;

  /* ── Icon ── */
  --void-icon-stroke-width: 1.5;

  /* ── Sidebar ── */
  --void-sidebar-width:           15rem;
  --void-sidebar-collapsed-width: 3.75rem;
}

/* ── Animation speed levels ─────────────────────────────────────
   Override the global scale; off = no animation, instant = ~15ms.
   ─────────────────────────────────────────────────────────────── */

:root[data-anim-speed="off"]      { --void-anim-scale: 0; }
:root[data-anim-speed="slowest"]  { --void-anim-scale: 3; }
:root[data-anim-speed="slow"]     { --void-anim-scale: 1.75; }
:root[data-anim-speed="normal"]   { --void-anim-scale: 1; }
:root[data-anim-speed="fast"]     { --void-anim-scale: 0.5; }
:root[data-anim-speed="faster"]   { --void-anim-scale: 0.25; }
:root[data-anim-speed="instant"]  { --void-anim-scale: 0.05; }

/* Reduced-motion fallback — only when no explicit setting */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-anim-speed]) { --void-anim-scale: 0; }
}