:root {
  /* ---------- OKLCH hue channel (schema v3, bible §2) ----------
     Hue = view identity. A view re-hues itself by overriding ONLY this
     channel (e.g. [data-view="campaigns"] { --view-hue: 155; }) — every
     accent-derived token follows. L/C move within a view; hue never does. */
  --view-hue: 341.7;            /* house default: atlas pink */

  /* ---------- Colors: backgrounds (persistent world — fixed hue) ---------- */
  --bg-root: oklch(0.117 0.009 284.9);
  --bg-surface: oklch(0.148 0.013 284.7);
  --bg-elevated: oklch(0.173 0.005 284.9);
  --bg-overlay: oklch(0.088 0.014 283.2 / 0.85);

  /* ---------- Colors: text ---------- */
  --text-primary: oklch(0.957 0.007 286.3);
  --text-secondary: oklch(0.815 0.033 285.6);
  --text-muted: oklch(0.536 0.047 284.7);
  --text-ghost: oklch(0.330 0.037 284.2);

  /* ---------- Colors: borders ---------- */
  --border-subtle: oklch(0.181 0.014 284.9);
  --border-default: oklch(0.226 0.031 283.7);
  --border-hover: oklch(0.301 0.057 282.4);
  --border-strong: oklch(0.930 0.033 244.0 / 0.19);

  /* ---------- Colors: accent family (derived from the hue channel) ---------- */
  --accent: oklch(0.710 0.143 var(--view-hue));         /* interactive / primary */
  --accent-strong: oklch(0.800 0.160 var(--view-hue));  /* hover, emphasis */
  --accent-bg: oklch(0.710 0.143 var(--view-hue) / 0.06);
  --accent-border: oklch(0.710 0.143 var(--view-hue) / 0.27);

  /* Recommended per-view hues (override --view-hue with one of these):
     pink 341.7 · gold 81.8 · yellow 108.6 · orange 60.7 · blue 265.5 · green 133.8 */
  --accent-pink: oklch(0.710 0.143 341.7);
  --accent-gold: oklch(0.737 0.145 81.8);
  --accent-yellow: oklch(0.977 0.132 108.6);
  --accent-orange: oklch(0.724 0.165 60.7);
  --accent-blue: oklch(0.379 0.138 265.5);
  --accent-green: oklch(0.600 0.146 133.8);

  /* ---------- Colors: status badges ---------- */
  --badge-green-bg: oklch(0.881 0.211 155.4 / 0.12);
  --badge-green-text: oklch(0.886 0.191 157.0 / 0.83);
  --badge-purple-bg: oklch(0.593 0.238 289.9 / 0.21);
  --badge-purple-text: oklch(0.778 0.125 293.2);
  --badge-blue-bg: oklch(0.597 0.221 258.0 / 0.23);
  --badge-blue-text: oklch(0.764 0.126 249.5);
  --badge-orange-bg: oklch(0.728 0.180 55.0 / 0.13);
  --badge-orange-text: oklch(0.862 0.173 89.0);
  --badge-red-bg: oklch(0.637 0.249 21.9 / 0.18);
  --badge-red-text: oklch(0.780 0.128 22.1);

  /* ---------- Typography: families ---------- */
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-sans: 'Inter', 'DM Sans', 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --font-display-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  /* ---------- Typography: size scale ---------- */
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-lg: 1rem;        /* 16px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 6rem;       /* 96px */

  /* ---------- Typography: line heights ---------- */
  --leading-none: 1.1;
  --leading-tight: 1.25;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ---------- Typography: weights ---------- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Spacing (8px grid) ---------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 2.5rem;    /* 40px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-padding: 24px;

  /* ---------- Border radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ---------- Depth: z-index ladder (schema v3, bible §5) ---------- */
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-overlay: 1001;
  --z-toast: 9999;

  /* ---------- Depth: shadows — floating elements ONLY (bible §5) ---------- */
  --shadow-float: 0 4px 12px oklch(0 0 0 / 0.3);   /* dropdowns, popovers */
  --shadow-modal: 0 12px 40px oklch(0 0 0 / 0.3);  /* modals */
  --shadow-layer-2: var(--shadow-float);           /* legacy alias (pre-v3 name) */

  /* ---------- Motion: durations ---------- */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 400ms;
  --duration-float: 600ms;

  /* ---------- Motion: easing ---------- */
  --ease-default: ease;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: ease-out;

  /* ---------- Breakpoints (reference — use in @media) ---------- */
  --bp-tablet-landscape: 1024px;
  --bp-tablet-portrait: 768px;
  --bp-phone: 480px;
  --bp-phone-small: 400px;

  /* ---------- Chart tokens (consumed by bar-chart, future viz) ---------- */
  --chart-background: var(--bg-root);
  --chart-foreground: var(--text-primary);
  --chart-foreground-muted: var(--text-muted);
  --chart-label: var(--text-secondary);
  --chart-line-primary: var(--accent);
  --chart-line-secondary: var(--accent-gold);
  --chart-crosshair: var(--border-hover);
  --chart-grid: var(--border-default);
  --chart-tooltip-foreground: var(--text-primary);
  --chart-tooltip-muted: var(--text-muted);

  /* shadcn-flavor tokens used by the bar-chart tooltip surface */
  --popover: var(--bg-elevated);
  --popover-foreground: var(--text-primary);

  /* ---------- Status tokens (paired bg + text per state, schema v2) ---------- */
  --status-green-bg: var(--badge-green-bg);
  --status-green-text: var(--badge-green-text);
  --status-red-bg: var(--badge-red-bg);
  --status-red-text: var(--badge-red-text);
  --status-orange-bg: var(--badge-orange-bg);
  --status-orange-text: var(--badge-orange-text);
}