/* ═══════════════════════════════════════════════════════════════
   CHEDDARBOOKS DESIGN SYSTEM  ·  Token Layer  ·  v1.0
   Target-agnostic CSS custom properties.
   --cb-*  base brand tokens
   Rendering targets: HTML, Blazor, TUI (map to nearest equivalent)
═══════════════════════════════════════════════════════════════ */
:root {
  /* ─ Primitive · Neutral (warm-tinted) ─ */
  --cb-neutral-50:  oklch(97.5% 0.006 75);
  --cb-neutral-100: oklch(94%   0.008 75);
  --cb-neutral-200: oklch(88%   0.010 75);
  --cb-neutral-300: oklch(80%   0.011 75);
  --cb-neutral-400: oklch(68%   0.012 75);
  --cb-neutral-500: oklch(56%   0.012 75);
  --cb-neutral-600: oklch(45%   0.011 75);
  --cb-neutral-700: oklch(35%   0.010 75);
  --cb-neutral-800: oklch(26%   0.009 75);
  --cb-neutral-900: oklch(18%   0.008 75);
  --cb-neutral-950: oklch(11%   0.007 75);
  /* ─ Primitive · Amber ─ */
  --cb-amber-50:  oklch(97%  0.030 85);
  --cb-amber-100: oklch(93%  0.060 85);
  --cb-amber-200: oklch(88%  0.100 80);
  --cb-amber-300: oklch(82%  0.140 78);
  --cb-amber-400: oklch(76%  0.170 75);
  --cb-amber-500: oklch(70%  0.185 70);
  --cb-amber-600: oklch(62%  0.175 65);
  --cb-amber-700: oklch(52%  0.160 60);
  --cb-amber-800: oklch(42%  0.130 58);
  --cb-amber-900: oklch(32%  0.100 55);
  /* ─ Primitive · Green ─ */
  --cb-green-100: oklch(93%  0.060 145);
  --cb-green-500: oklch(58%  0.155 145);
  --cb-green-700: oklch(42%  0.130 145);
  /* ─ Primitive · Red ─ */
  --cb-red-100:   oklch(93%  0.055 25);
  --cb-red-500:   oklch(55%  0.185 25);
  --cb-red-700:   oklch(40%  0.155 25);
  /* ─ Primitive · Blue ─ */
  --cb-blue-100:  oklch(93%  0.040 240);
  --cb-blue-500:  oklch(56%  0.155 240);
  --cb-blue-700:  oklch(40%  0.130 240);

  /* ─ Semantic · Text ─ */
  --cb-text-primary:   var(--cb-neutral-900);
  --cb-text-secondary: var(--cb-neutral-600);
  --cb-text-muted:     var(--cb-neutral-400);
  --cb-text-inverse:   var(--cb-neutral-50);
  --cb-text-accent:    var(--cb-amber-700);
  --cb-text-success:   var(--cb-green-700);
  --cb-text-danger:    var(--cb-red-700);
  /* ─ Semantic · Surface ─ */
  --cb-surface-base:    var(--cb-neutral-50);
  --cb-surface-raised:  oklch(100% 0 0);
  --cb-surface-sunken:  var(--cb-neutral-100);
  --cb-surface-overlay: rgba(0,0,0,0.48);
  /* ─ Semantic · Border ─ */
  --cb-border-default: var(--cb-neutral-200);
  --cb-border-strong:  var(--cb-neutral-300);
  --cb-border-accent:  var(--cb-amber-300);
  /* ─ Semantic · Accent ─ */
  --cb-accent:        var(--cb-amber-500);
  --cb-accent-hover:  var(--cb-amber-600);
  --cb-accent-subtle: var(--cb-amber-50);
  --cb-accent-on:     oklch(100% 0 0);
  /* ─ Semantic · Status ─ */
  --cb-success:        var(--cb-green-500);
  --cb-success-subtle: var(--cb-green-100);
  --cb-danger:         var(--cb-red-500);
  --cb-danger-subtle:  var(--cb-red-100);
  --cb-info:           var(--cb-blue-500);
  --cb-info-subtle:    var(--cb-blue-100);

  /* ─ Typography ─ */
  --cb-font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --cb-font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --cb-font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --cb-text-xs:   0.6875rem;
  --cb-text-sm:   0.8125rem;
  --cb-text-base: 0.9375rem;
  --cb-text-md:   1.0625rem;
  --cb-text-lg:   1.25rem;
  --cb-text-xl:   1.5625rem;
  --cb-text-2xl:  1.9375rem;
  --cb-text-3xl:  2.4375rem;
  --cb-text-4xl:  3.0625rem;
  --cb-text-5xl:  3.8125rem;
  --cb-weight-light:    300;
  --cb-weight-regular:  450;
  --cb-weight-medium:   500;
  --cb-weight-semibold: 600;
  --cb-weight-bold:     700;
  --cb-leading-tight:   1.1;
  --cb-leading-snug:    1.3;
  --cb-leading-normal:  1.5;
  --cb-leading-relaxed: 1.7;
  --cb-tracking-tight:  -0.02em;
  --cb-tracking-normal: 0em;
  --cb-tracking-wide:   0.05em;
  --cb-tracking-wider:  0.1em;

  /* ─ Spacing (4px grid) ─ */
  --cb-space-0:  0px;
  --cb-space-1:  4px;
  --cb-space-2:  8px;
  --cb-space-3:  12px;
  --cb-space-4:  16px;
  --cb-space-5:  20px;
  --cb-space-6:  24px;
  --cb-space-8:  32px;
  --cb-space-10: 40px;
  --cb-space-12: 48px;
  --cb-space-16: 64px;
  --cb-space-20: 80px;
  --cb-space-24: 96px;

  /* ─ Border Radius ─ */
  --cb-radius-xs:   4px;
  --cb-radius-sm:   8px;
  --cb-radius-md:   12px;
  --cb-radius-lg:   16px;
  --cb-radius-xl:   20px;
  --cb-radius-2xl:  24px;
  --cb-radius-pill: 999px;

  /* ─ Shadows ─ */
  --cb-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --cb-shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --cb-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --cb-shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --cb-shadow-xl: 0 16px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);

  /* ─ Motion ─ */
  --cb-duration-instant: 0ms;
  --cb-duration-fast:    100ms;
  --cb-duration-normal:  200ms;
  --cb-duration-slow:    350ms;
  --cb-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --cb-ease-spring:      cubic-bezier(0.34, 1.4, 0.64, 1);
  --cb-ease-out:         cubic-bezier(0.0, 0, 0.2, 1);

  /* ─ Focus ─ */
  --cb-focus-ring: 0 0 0 3px var(--cb-amber-300);
}

[data-theme="dark"] {
  --cb-text-primary:   var(--cb-neutral-50);
  --cb-text-secondary: var(--cb-neutral-400);
  --cb-text-muted:     var(--cb-neutral-600);
  --cb-text-inverse:   var(--cb-neutral-900);
  --cb-text-accent:    var(--cb-amber-400);
  --cb-text-success:   var(--cb-green-500);
  --cb-text-danger:    var(--cb-red-500);
  --cb-surface-base:    var(--cb-neutral-950);
  --cb-surface-raised:  var(--cb-neutral-900);
  --cb-surface-sunken:  oklch(8% 0.007 75);
  --cb-surface-overlay: rgba(0,0,0,0.7);
  --cb-border-default: var(--cb-neutral-800);
  --cb-border-strong:  var(--cb-neutral-700);
  --cb-border-accent:  var(--cb-amber-700);
  --cb-accent:        var(--cb-amber-400);
  --cb-accent-hover:  var(--cb-amber-300);
  --cb-accent-subtle: oklch(16% 0.04 80);
  --cb-accent-on:     var(--cb-neutral-950);
  --cb-success-subtle: oklch(16% 0.05 145);
  --cb-danger-subtle:  oklch(16% 0.05 25);
  --cb-info-subtle:    oklch(16% 0.05 240);
  --cb-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --cb-shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
  --cb-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --cb-shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --cb-shadow-xl: 0 16px 40px rgba(0,0,0,0.7);
  --cb-focus-ring: 0 0 0 3px var(--cb-amber-700);
}