:root {
  --bg-canvas: color-mix(in oklab, var(--color-prussian-blue-950) 80%, black);
  --bg-surface: color-mix(in oklab, var(--bg-canvas) 92%, var(--color-prussian-blue-900));
  --bg-card: color-mix(in oklab, var(--bg-canvas) 89%, var(--color-prussian-blue-900));
  --bg-card-strong: color-mix(in oklab, var(--bg-canvas) 82%, var(--color-prussian-blue-900));
  --border-subtle: color-mix(in oklab, var(--bg-canvas) 68%, var(--color-prussian-blue-800));
  --border-strong: color-mix(in oklab, var(--bg-canvas) 60%, var(--color-prussian-blue-700));
  --text-primary: var(--color-parchment-50);
  --text-secondary: color-mix(in oklab, var(--color-parchment-100) 78%, var(--bg-canvas));
  --text-muted: color-mix(in oklab, var(--color-parchment-400) 56%, var(--bg-canvas));
  --accent: var(--color-azure-blue-500);
  --accent-strong: var(--color-azure-blue-400);
  --accent-soft: var(--color-azure-blue-900);
  --cta-text: var(--color-parchment-50);
  --focus-ring: var(--color-powder-blush-300);
  --surface-overlay: color-mix(in oklab, var(--bg-canvas) 98%, var(--accent-soft));
  --surface-overlay-soft: color-mix(in oklab, var(--bg-canvas) 99%, var(--accent-soft));
  --surface-highlight: color-mix(in oklab, var(--bg-card) 86%, var(--accent-strong));
  --shadow-soft: 0 14px 38px color-mix(in oklab, var(--bg-canvas) 70%, var(--accent-soft));
  --shadow-card: 0 8px 22px color-mix(in oklab, var(--bg-canvas) 82%, var(--accent-soft));
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --content-width: 72rem;
}