:root{
  color-scheme: light dark;

  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;


  --azure-50:  oklch(97% 0.015 248);
  --azure-100: oklch(94% 0.032 248);
  --azure-200: oklch(88% 0.062 248);
  --azure-300: oklch(80% 0.104 248);
  --azure-400: oklch(71% 0.148 248);
  --azure-500: oklch(63% 0.176 248);
  --azure-600: oklch(55% 0.186 248);
  --azure-700: oklch(47% 0.166 248);
  --azure-800: oklch(39% 0.136 248);
  --azure-900: oklch(32% 0.106 248);
  --azure-950: oklch(24% 0.078 248);

  --n-0:    oklch(100% 0 0);
  --n-25:   oklch(99% 0.002 258);
  --n-50:   oklch(97.5% 0.004 258);
  --n-100:  oklch(95.5% 0.006 258);
  --n-150:  oklch(93.5% 0.007 258);
  --n-200:  oklch(91% 0.009 258);
  --n-300:  oklch(85% 0.011 258);
  --n-400:  oklch(72% 0.013 258);
  --n-500:  oklch(60% 0.015 258);
  --n-600:  oklch(50% 0.017 258);
  --n-700:  oklch(39% 0.019 258);
  --n-750:  oklch(33% 0.019 258);
  --n-800:  oklch(27% 0.019 258);
  --n-850:  oklch(22.5% 0.018 258);
  --n-900:  oklch(19% 0.017 258);
  --n-950:  oklch(15.5% 0.016 258);
  --n-1000: oklch(11.5% 0.014 258);

  --signal-400: oklch(88% 0.17 118);
  --signal-500: oklch(84% 0.19 118);
  --signal-600: oklch(76% 0.18 120);
  --signal-700: oklch(64% 0.16 122);

  --green-500: oklch(64% 0.15 152); --green-400: oklch(75% 0.16 152); --green-900: oklch(28% 0.07 152);
  --amber-500: oklch(72% 0.15 78);  --amber-400: oklch(82% 0.15 82);  --amber-900: oklch(30% 0.07 70);
  --red-500:   oklch(57% 0.19 26);  --red-400:   oklch(69% 0.18 26);  --red-900:  oklch(28% 0.09 26);

  --canvas:        light-dark(var(--n-100), var(--n-950));
  --surface:       light-dark(var(--n-0),   var(--n-900));
  --surface-2:     light-dark(var(--n-50),  var(--n-850));
  --surface-3:     light-dark(var(--n-200), var(--n-800));
  --surface-inset: light-dark(var(--n-150), var(--n-1000));
  --surface-nav:   light-dark(var(--n-0),   var(--n-950));
  --overlay:       light-dark(oklch(20% 0.02 258 / 0.32), oklch(8% 0.01 258 / 0.62));

  --ink:        light-dark(var(--n-900), var(--n-50));
  --ink-strong: light-dark(var(--n-1000), var(--n-0));
  --ink-muted:  light-dark(var(--n-600), var(--n-400));
  --ink-subtle: light-dark(var(--n-500), var(--n-500));
  --ink-invert: light-dark(var(--n-0), var(--n-950));

  --line:        light-dark(var(--n-200), var(--n-800));
  --line-soft:   light-dark(var(--n-150), var(--n-850));
  --line-strong: light-dark(var(--n-300), var(--n-750));

  --primary:        light-dark(var(--azure-600), var(--azure-400));
  --primary-hover:  light-dark(var(--azure-700), var(--azure-300));
  --primary-active: light-dark(var(--azure-800), var(--azure-200));
  --primary-ink:    light-dark(var(--n-0), var(--n-1000));
  --primary-soft:   light-dark(var(--azure-50), oklch(30% 0.07 248));
  --primary-soft-ink: light-dark(var(--azure-800), var(--azure-200));
  --primary-ring:   light-dark(oklch(55% 0.186 248 / 0.28), oklch(71% 0.148 248 / 0.34));

  --signal:      light-dark(var(--signal-700), var(--signal-500));
  --signal-ink:  light-dark(var(--n-1000), var(--n-1000));
  --signal-soft: light-dark(oklch(94% 0.08 118), oklch(30% 0.09 120));

  --success:      light-dark(var(--green-500), var(--green-400));
  --success-soft: light-dark(oklch(95% 0.05 152), var(--green-900));
  --warning:      light-dark(var(--amber-500), var(--amber-400));
  --warning-soft: light-dark(oklch(96% 0.05 82), var(--amber-900));
  --danger:       light-dark(var(--red-500), var(--red-400));
  --danger-soft:  light-dark(oklch(96% 0.03 26), var(--red-900));

  --series-1: light-dark(oklch(55% 0.19 248), oklch(72% 0.16 248));
  --series-2: light-dark(oklch(55% 0.19 300), oklch(72% 0.16 300));
  --series-3: light-dark(oklch(55% 0.15 190), oklch(72% 0.13 190));
  --series-4: light-dark(oklch(55% 0.17 350), oklch(72% 0.15 350));
  --series-5: light-dark(oklch(55% 0.14 145), oklch(72% 0.14 145));
  --series-6: light-dark(oklch(55% 0.15 70),  oklch(72% 0.14 70));

  --text-2xs: 0.75rem;
  --text-xs:  0.8125rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.0625rem;
  --text-lg:  1.1875rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.375rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --leading-loose: 1.7;
  --tracking-tight: -0.018em; --tracking-snug: -0.01em; --tracking-wide: 0.06em;

  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-7: 2rem;    --s-8: 2.5rem;
  --s-9: 3rem;    --s-10: 4rem;   --s-11: 5rem;   --s-12: 6rem;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 999px;

  --shadow-xs: 0 1px 2px light-dark(oklch(20% 0.02 258 / 0.06), oklch(0% 0 0 / 0.4));
  --shadow-sm: 0 1px 2px light-dark(oklch(20% 0.02 258 / 0.05), oklch(0% 0 0 / 0.35)),
               0 2px 6px light-dark(oklch(20% 0.02 258 / 0.05), oklch(0% 0 0 / 0.28));
  --shadow-md: 0 2px 4px light-dark(oklch(20% 0.02 258 / 0.05), oklch(0% 0 0 / 0.35)),
               0 6px 16px light-dark(oklch(20% 0.02 258 / 0.07), oklch(0% 0 0 / 0.34));
  --shadow-lg: 0 4px 8px light-dark(oklch(20% 0.02 258 / 0.05), oklch(0% 0 0 / 0.36)),
               0 16px 36px light-dark(oklch(20% 0.02 258 / 0.10), oklch(0% 0 0 / 0.44));
  --shadow-pop: 0 12px 32px light-dark(oklch(20% 0.02 258 / 0.14), oklch(0% 0 0 / 0.55));

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 260ms;

  --nav-w: 236px; --nav-w-collapsed: 60px; --topbar-h: 52px;
}

:root[data-theme="light"]{ color-scheme: light }
:root[data-theme="dark"]{ color-scheme: dark }

.site{ --text-base: 1rem; --text-md: 1.0625rem; --text-lg: 1.1875rem; --leading-normal: 1.65 }

:root{

  --chart-1: var(--series-1);
  --chart-2: var(--series-2);
  --chart-3: var(--series-3);
  --chart-4: var(--series-4);
  --chart-5: var(--series-5);
  --chart-6: var(--series-6);
  --chart-grid:   light-dark(var(--n-150), var(--n-800));
  --chart-axis:   light-dark(var(--n-300), var(--n-750));
  --chart-tick:   light-dark(var(--n-600), var(--n-400));
  --chart-legend: light-dark(var(--n-700), var(--n-300));
  --chart-ink:    var(--ink-strong);
  --chart-surface:var(--surface);
  --graph-bg:     light-dark(var(--n-50), oklch(13.5% 0.014 258));
  --chart-marker:     light-dark(var(--n-900), var(--n-50));
  --chart-marker-ink: light-dark(var(--n-0), var(--n-950));

  --band-easy:      light-dark(oklch(58% 0.13 152), oklch(74% 0.14 152));
  --band-moderate:  light-dark(oklch(65% 0.14 78),  oklch(80% 0.14 82));
  --band-difficult: light-dark(oklch(57% 0.18 26),  oklch(70% 0.17 26));

  --perf-excellent: light-dark(oklch(58% 0.14 152), oklch(74% 0.14 152));
  --perf-good:      light-dark(oklch(60% 0.12 182), oklch(76% 0.12 182));
  --perf-fair:      light-dark(oklch(65% 0.14 78),  oklch(80% 0.14 82));
  --perf-poor:      light-dark(oklch(57% 0.18 26),  oklch(70% 0.17 26));

  --comp-primary: var(--primary);
  --comp-other:   light-dark(var(--n-400), var(--n-600));

  --zone-in:  light-dark(oklch(88% 0.09 152), oklch(40% 0.10 152));
  --zone-out: light-dark(oklch(92% 0.05 26),  oklch(34% 0.09 26));

  --bucket-critical:      light-dark(oklch(55% 0.19 248), oklch(72% 0.16 248));
  --bucket-critical-soft: light-dark(oklch(95% 0.030 248), oklch(30% 0.065 248));
  --bucket-critical-ink:  light-dark(oklch(42% 0.16 248), oklch(84% 0.09 248));
  --bucket-opportunity:      light-dark(oklch(55% 0.15 190), oklch(72% 0.13 190));
  --bucket-opportunity-soft: light-dark(oklch(95% 0.030 190), oklch(30% 0.060 190));
  --bucket-opportunity-ink:  light-dark(oklch(42% 0.13 190), oklch(84% 0.08 190));
  --bucket-avoid:      light-dark(oklch(55% 0.19 300), oklch(72% 0.16 300));
  --bucket-avoid-soft: light-dark(oklch(95% 0.030 300), oklch(30% 0.065 300));
  --bucket-avoid-ink:  light-dark(oklch(42% 0.16 300), oklch(84% 0.09 300));
  --bucket-gamble:      light-dark(oklch(58% 0.15 70), oklch(76% 0.14 70));
  --bucket-gamble-soft: light-dark(oklch(95% 0.035 70), oklch(30% 0.060 70));
  --bucket-gamble-ink:  light-dark(oklch(44% 0.13 70), oklch(85% 0.08 70));

}

:root{
  --warning-ink:     light-dark(oklch(42% 0.11 62),  var(--amber-400));
  --danger-ink:      light-dark(oklch(45% 0.16 26),  var(--red-400));
  --signal-soft-ink: light-dark(oklch(38% 0.11 122), var(--signal-400));
}