:root {
  /* Color tokens */
  --color-page: rgb(255 255 255);
  --color-page-alt: rgb(249 250 251);
  --color-surface: rgb(15 23 42);
  --color-surface-alt: rgb(17 24 39);
  --color-bg: var(--color-surface);
  --color-card: rgb(30 41 59);
  --color-card-private: rgb(59 29 116);
  --color-card-critical: rgb(63 11 19);
  --color-panel: rgb(31 41 55);
  --color-panel-hover: rgb(51 65 85);
  --color-border: rgb(55 65 81);
  --color-border-subtle: rgb(209 213 219);
  --color-primary: rgb(254 0 50);
  --color-secondary: rgb(255 147 165);
  --color-logo-accent: var(--color-primary);
  --color-logo-wordmark: var(--color-neutral-700);
  --color-logo-wordmark-inverse: var(--color-white);
  --color-logo-background: var(--color-neutral-700);
  --color-logo-background-inverse: var(--color-white);
  --color-info: rgb(96 165 250);
  --color-info-strong: rgb(37 99 235);
  --color-info-pressed: rgb(29 78 216);
  --color-muted-strong: rgb(107 114 128);
  --color-text: rgb(248 250 252);
  --color-text-strong: rgb(15 23 42);
  --color-text-muted: var(--color-muted);
  --color-muted: rgb(148 163 184);
  --color-muted-alt: rgb(156 163 175);
  --color-subtle-text: rgb(226 232 240);
  --color-subtle: rgb(229 231 235);
  --color-critical: rgb(127 29 29);
  --color-critical-strong: rgb(153 27 27);
  --color-warning: rgb(250 204 21);
  --color-warning-strong: rgb(217 119 6);
  --color-warning-surface: rgb(146 64 14 / 0.24);
  --color-warning-glass: rgb(250 204 21 / 0.18);
  --color-neutral-700: rgb(63 63 70);
  --color-neutral-600: rgb(82 82 91);
  --color-white: rgb(255 255 255);
  --color-black: rgb(0 0 0);
  --color-overlay: rgb(26 34 52);
  --color-overlay-black: rgb(0 0 0 / 0.9);
  --color-overlay-muted: rgb(15 23 42 / 0.55);
  --color-overlay-strong: rgb(15 23 42 / 0.75);
  --color-overlay-darker: rgb(15 23 42 / 0.88);
  --color-overlay-panel: rgb(26 34 52 / 0.82);
  --color-overlay-panel-soft: rgb(26 34 52 / 0.65);
  --color-overlay-panel-tint: rgb(31 41 55 / 0.5);
  --color-overlay-panel-glass: rgb(28 37 58 / 0.72);
  --color-overlay-panel-glass-soft: rgb(31 41 55 / 0.55);
  --color-modal-backdrop: rgb(8 12 24 / 0.58);
  --color-modal-surface: rgb(20 28 46 / 0.78);
  --color-overlay-veil: rgb(11 17 32 / 0.96);
  --color-overlay-banner: rgb(51 65 85 / 0.95);
  --color-sidebar-surface: rgb(17 24 39 / 0.94);
  --color-sidebar-surface-alt: rgb(11 22 48 / 0.78);
  --color-sidebar-border: rgb(148 163 184 / 0.28);
  --color-sidebar-border-strong: rgb(148 163 184 / 0.42);
  --color-sidebar-hover: rgb(56 189 248 / 0.18);
  --color-sidebar-hover-strong: rgb(129 140 248 / 0.28);
  --color-sidebar-glow: rgb(56 189 248 / 0.35);
  --color-sidebar-accent-start: rgb(56 189 248 / 0.9);
  --color-sidebar-accent-end: rgb(129 140 248 / 0.85);
  --color-sidebar-text-muted: rgb(203 213 225 / 0.75);
  --color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92);
  --color-overlay-panel-gradient-end: rgb(15 23 42 / 0.92);
  --color-surface-tint-subtle: rgb(148 163 184 / 0.08);
  --color-border-translucent: rgb(148 163 184 / 0.18);
  --color-border-translucent-strong: rgb(148 163 184 / 0.25);
  --color-border-translucent-bright: rgb(148 163 184 / 0.32);
  --color-border-translucent-stronger: rgb(148 163 184 / 0.35);
  --color-border-translucent-strongest: rgb(148 163 184 / 0.4);
  --color-border-translucent-glow: rgb(148 163 184 / 0.55);
  --color-border-translucent-medium: rgb(148 163 184 / 0.2);
  --color-border-neutral-soft: rgb(229 231 235 / 0.35);
  --color-border-info-soft: rgb(96 165 250 / 0.35);
  --color-border-sidebar-strong: rgb(55 65 81 / 0.9);
  --color-ring-private: rgb(168 85 247 / 0.55);
  --color-ring-private-hover: rgb(192 132 252 / 0.65);
  --color-ring-critical: rgb(239 68 68 / 0.4);
  --color-ring-critical-soft: rgb(239 68 68 / 0.35);
  --color-ring-critical-hover: rgb(239 68 68 / 0.45);
  --color-ring-critical-strong: rgb(239 68 68 / 0.55);
  --color-ring-alert: rgb(220 38 38 / 0.6);
  --color-gradient-visibility-start: rgb(129 140 248 / 0.4);
  --color-gradient-visibility-end: rgb(192 132 252 / 0.32);
  --color-white-soft: rgb(255 255 255 / 0.1);
  --color-white-softer: rgb(255 255 255 / 0.3);
  --color-white-softest: rgb(255 255 255 / 0.4);
  --color-shadow-floating: rgb(8 11 30 / 0.55);
  --color-shadow-elevated: rgb(8 11 30 / 0.45);
  --color-shadow-panel: rgb(15 23 42 / 0.35);
  --color-shadow-notification: rgb(15 23 42 / 0.3);
  --color-shadow-sidebar: rgb(0 0 0 / 0.45);
  --color-divider-strong: rgb(15 23 42 / 0.35);
  --color-text-frosted-strong: rgb(226 232 240 / 0.94);
  --color-text-frosted: rgb(226 232 240 / 0.9);
  --color-text-frosted-soft: rgb(226 232 240 / 0.82);

  /* Layout & stacking */
  --scrollbar-width: 0.5rem;
  --scrollbar-track: var(--color-white-soft);
  --scrollbar-thumb: var(--color-white-softer);
  --scrollbar-thumb-hover: var(--color-white-softest);
  /* Sidebar stack must remain below modal overlays. */
  --z-sidebar-overlay: 10;
  --z-sidebar: 20;
  --z-modal-root: 100;
  --z-modal-overlay: 110;
  --z-modal-content: 120;
  --z-modal-player: 130;
  --sidebar-width-expanded: 16rem;
  --sidebar-width-collapsed: 4rem;
  --sidebar-width: var(--sidebar-width-expanded);
  --sidebar-control-size: 2.75rem;
  --sidebar-content-gap: 1rem;
  --blog-embed-height: 100rem;

  /* Blog palette */
  --color-blog-transparent: rgb(0 0 0 / 0);
  --color-blog-cyan-500: rgb(6 182 212);
  --color-blog-sky-500: rgb(0 187 255);
  --color-blog-teal-600: rgb(14 116 144);
  --color-blog-green-800: rgb(20 83 45);
  --color-blog-green-700: rgb(21 128 61);
  --color-blog-teal-700: rgb(22 78 99);
  --color-blog-gray-900: rgb(23 23 23);
  --color-blog-coffee-900: rgb(28 25 23);
  --color-blog-green-500: rgb(34 197 94);
  --color-blog-gray-800: rgb(43 43 43);
  --color-blog-gray-700: rgb(59 59 59);
  --color-blog-teal-accent: rgb(62 139 138);
  --color-blog-gray-650: rgb(64 64 64);
  --color-blog-brown-700: rgb(68 64 60);
  --color-blog-purple-900: rgb(88 28 135);
  --color-blog-gray-500: rgb(102 102 102);
  --color-blog-gray-450: rgb(115 115 115);
  --color-blog-gray-440: rgb(116 116 116);
  --color-blog-brown-500: rgb(120 113 108);
  --color-blog-rust-700: rgb(124 45 18);
  --color-blog-purple-700: rgb(126 34 206);
  --color-blog-purple-accent: rgb(146 55 156);
  --color-blog-purple-muted: rgb(150 96 156);
  --color-blog-gray-300: rgb(153 153 153);
  --color-blog-purple-500: rgb(168 85 247);
  --color-blog-gray-275: rgb(169 169 169);
  --color-blog-red-600: rgb(185 28 28);
  --color-blog-rust-600: rgb(194 65 12);
  --color-blog-error: rgb(202 23 23);
  --color-blog-gray-220: rgb(203 203 203);
  --color-blog-gray-210: rgb(204 204 204);
  --color-blog-gray-200: rgb(222 222 222);
  --color-blog-amber-500: rgb(228 152 77);
  --color-blog-gray-190: rgb(224 224 224);
  --color-blog-orange-600: rgb(227 84 40);
  --color-blog-gray-180: rgb(233 233 233);
  --color-blog-gray-170: rgb(235 235 235);
  --color-blog-red-500: rgb(239 68 68);
  --color-blog-amber-400: rgb(246 173 85);
  --color-blog-neutral-100: rgb(245 245 245);
  --color-blog-neutral-120: rgb(246 246 246);
  --color-blog-orange-500: rgb(249 115 22);
  --color-blog-neutral-50: rgb(253 253 253);
  --ztr-font: var(--font-family-sans);
  --ztr-font-size: var(--font-size-base);
  --ztr-text-color: var(--color-blog-gray-800);
  --ztr-link-color: var(--color-blog-purple-700);
  --ztr-icon-color: var(--color-blog-gray-700);
  --ztr-background-color: rgba(0, 0, 0, 0.03);
  --ztr-login-button-color: var(--color-blog-gray-800);

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);
  --shadow-modal: 0 2.75rem 6rem -1.25rem rgb(8 11 30 / 75%);

  /* Typography */
  --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* Motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 160ms;
  --motion-duration-slow: 280ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --modal-motion-duration: var(--motion-duration-base);
}

[data-theme="light"] {
  /* Light theme overrides */
  --color-surface: rgb(248 250 252);
  --color-surface-alt: rgb(241 245 249);
  --color-bg: var(--color-surface);
  --color-card: rgb(255 255 255);
  --color-card-private: rgb(244 236 255);
  --color-card-critical: rgb(255 228 230);
  --color-panel: rgb(255 255 255);
  --color-panel-hover: rgb(226 232 240);
  --color-border: rgb(148 163 184);
  --color-border-subtle: rgb(203 213 225);
  --color-primary: rgb(220 38 38);
  --color-text: rgb(15 23 42);
  --color-text-strong: rgb(15 23 42);
  --color-muted: rgb(71 85 105);
  --color-muted-alt: rgb(100 116 139);
  --color-muted-strong: rgb(51 65 85);
  --color-overlay: rgb(15 23 42 / 0.55);
  --color-overlay-muted: rgb(15 23 42 / 0.35);
  --color-overlay-strong: rgb(15 23 42 / 0.65);
  --color-overlay-darker: rgb(15 23 42 / 0.72);
  --color-overlay-panel: rgb(15 23 42 / 0.78);
  --color-sidebar-surface: rgb(255 255 255 / 0.82);
  --color-sidebar-surface-alt: rgb(226 232 240 / 0.7);
  --color-sidebar-border: rgb(148 163 184 / 0.22);
  --color-sidebar-border-strong: rgb(148 163 184 / 0.32);
  --color-sidebar-hover: rgb(37 99 235 / 0.15);
  --color-sidebar-hover-strong: rgb(79 70 229 / 0.24);
  --color-sidebar-glow: rgb(14 165 233 / 0.3);
  --color-sidebar-accent-start: rgb(14 165 233 / 0.85);
  --color-sidebar-accent-end: rgb(129 140 248 / 0.78);
  --color-sidebar-text-muted: rgb(71 85 105 / 0.82);
  --color-overlay-panel-soft: rgb(15 23 42 / 0.6);
  --color-overlay-panel-tint: rgb(148 163 184 / 0.2);
  --color-modal-backdrop: rgb(15 23 42 / 0.45);
  --color-modal-surface: rgb(248 250 252 / 0.92);
  --color-overlay-panel-glass: rgb(255 255 255 / 0.82);
  --color-overlay-veil: rgb(148 163 184 / 0.5);
  --color-overlay-panel-gradient-start: rgb(255 255 255 / 0.92);
  --color-overlay-panel-gradient-end: rgb(226 232 240 / 0.92);
  --color-surface-tint-subtle: rgb(15 23 42 / 0.08);
  --color-border-translucent: rgb(148 163 184 / 0.18);
  --color-border-translucent-strong: rgb(148 163 184 / 0.22);
  --color-border-translucent-bright: rgb(148 163 184 / 0.28);
  --color-border-translucent-stronger: rgb(148 163 184 / 0.32);
  --color-border-translucent-strongest: rgb(148 163 184 / 0.36);
  --color-border-translucent-glow: rgb(148 163 184 / 0.45);
  --color-border-translucent-medium: rgb(148 163 184 / 0.2);
  --color-border-neutral-soft: rgb(148 163 184 / 0.25);
  --color-overlay-banner: rgb(148 163 184 / 0.7);
}