/* ==========================================================================
   vectora — Material Design 3 design tokens
   Tonal color generated from a single seed: Northwestern purple
   (#4E2A84 ≈ oklch(38.3% 0.143 297.6)). Every tone is derived in-browser
   with oklch(), so changing --seed-hue recolors the entire system.
   ========================================================================== */

:root {
  /* Follow the OS by default; the theme toggle pins one via data-theme. Each
     color role below picks its light or dark tone with light-dark(). */
  color-scheme: light dark;

  /* ---- Seed ---------------------------------------------------------- */
  --seed-hue: 298; /* Northwestern purple */

  /* Chroma per M3 palette role (OKLCH chroma units). Light and dark tones
     taper chroma so they stay inside the sRGB gamut. */
  --c-primary: 0.143;
  --c-secondary: 0.05;
  --c-neutral: 0.008;
  --c-neutral-variant: 0.024;
  --c-error: 0.19;
  --h-error: 25; /* fixed, brand-independent */

  /* ---- Primary tonal palette (tone 40 is the exact brand purple) ------ */
  --p-10: oklch(14% calc(var(--c-primary) * 0.55) var(--seed-hue));
  --p-20: oklch(24% calc(var(--c-primary) * 0.8) var(--seed-hue));
  --p-30: oklch(32% var(--c-primary) var(--seed-hue));
  --p-40: oklch(38.3% var(--c-primary) var(--seed-hue));
  --p-80: oklch(80% calc(var(--c-primary) * 0.62) var(--seed-hue));
  --p-90: oklch(91% calc(var(--c-primary) * 0.32) var(--seed-hue));
  --p-95: oklch(96% calc(var(--c-primary) * 0.15) var(--seed-hue));
  --p-100: oklch(100% 0 var(--seed-hue));

  /* ---- Secondary tonal palette ----------------------------------------- */
  --s-10: oklch(16% var(--c-secondary) var(--seed-hue));
  --s-30: oklch(35% var(--c-secondary) var(--seed-hue));
  --s-90: oklch(91% calc(var(--c-secondary) * 0.6) var(--seed-hue));

  /* ---- Neutral tonal palette (surfaces) --------------------------------- */
  --n-0: oklch(0% var(--c-neutral) var(--seed-hue));
  --n-4: oklch(9% var(--c-neutral) var(--seed-hue));
  --n-6: oklch(13% var(--c-neutral) var(--seed-hue));
  --n-10: oklch(18% var(--c-neutral) var(--seed-hue));
  --n-12: oklch(20% var(--c-neutral) var(--seed-hue));
  --n-17: oklch(24.5% var(--c-neutral) var(--seed-hue));
  --n-20: oklch(27% var(--c-neutral) var(--seed-hue));
  --n-22: oklch(29% var(--c-neutral) var(--seed-hue));
  --n-90: oklch(91% var(--c-neutral) var(--seed-hue));
  --n-92: oklch(93% var(--c-neutral) var(--seed-hue));
  --n-94: oklch(94.5% var(--c-neutral) var(--seed-hue));
  --n-95: oklch(95.5% var(--c-neutral) var(--seed-hue));
  --n-96: oklch(96.5% var(--c-neutral) var(--seed-hue));
  --n-98: oklch(98.4% calc(var(--c-neutral) * 0.6) var(--seed-hue));
  --n-100: oklch(100% 0 var(--seed-hue));

  /* ---- Neutral-variant tonal palette ------------------------------------ */
  --nv-30: oklch(36% var(--c-neutral-variant) var(--seed-hue));
  --nv-50: oklch(54% var(--c-neutral-variant) var(--seed-hue));
  --nv-60: oklch(63% var(--c-neutral-variant) var(--seed-hue));
  --nv-80: oklch(83% var(--c-neutral-variant) var(--seed-hue));

  /* ---- Error tonal palette (fixed hue) ---------------------------------- */
  --e-40: oklch(50% var(--c-error) var(--h-error));
  --e-80: oklch(82% calc(var(--c-error) * 0.5) var(--h-error));

  /* ---- System color roles: light-dark(light tone, dark tone) ------------ */
  --md-sys-color-primary: light-dark(var(--p-40), var(--p-80));
  --md-sys-color-on-primary: light-dark(var(--p-100), var(--p-20));
  --md-sys-color-primary-container: light-dark(var(--p-90), var(--p-30));
  --md-sys-color-on-primary-container: light-dark(var(--p-10), var(--p-90));
  --md-sys-color-inverse-primary: light-dark(var(--p-80), var(--p-40));

  --md-sys-color-secondary-container: light-dark(var(--s-90), var(--s-30));
  --md-sys-color-on-secondary-container: light-dark(var(--s-10), var(--s-90));

  --md-sys-color-error: light-dark(var(--e-40), var(--e-80));

  --md-sys-color-background: light-dark(var(--n-98), var(--n-6));
  --md-sys-color-on-background: light-dark(var(--n-10), var(--n-90));
  --md-sys-color-surface: light-dark(var(--n-98), var(--n-6));
  --md-sys-color-on-surface: light-dark(var(--n-10), var(--n-90));
  --md-sys-color-on-surface-variant: light-dark(var(--nv-30), var(--nv-80));

  --md-sys-color-outline: light-dark(var(--nv-50), var(--nv-60));
  --md-sys-color-outline-variant: light-dark(var(--nv-80), var(--nv-30));

  --md-sys-color-surface-container-lowest: light-dark(var(--n-100), var(--n-4));
  --md-sys-color-surface-container-low: light-dark(var(--n-96), var(--n-10));
  --md-sys-color-surface-container: light-dark(var(--n-94), var(--n-12));
  --md-sys-color-surface-container-high: light-dark(var(--n-92), var(--n-17));
  --md-sys-color-surface-container-highest: light-dark(var(--n-90), var(--n-22));

  --md-sys-color-inverse-surface: light-dark(var(--n-20), var(--n-90));
  --md-sys-color-inverse-on-surface: light-dark(var(--n-95), var(--n-20));
  --md-sys-color-scrim: var(--n-0);

  /* Raised card surface: brightest in light, a lifted tone in dark */
  --vec-surface-raised: light-dark(var(--n-100), var(--n-17));

  /* Brand band: always a deep purple, in both schemes */
  --vec-brand-band: light-dark(var(--p-40), var(--p-20));
  --vec-on-brand-band: light-dark(var(--p-95), var(--p-90));
  --vec-brand-band-accent: var(--p-80);

  /* ---- Shape scale ------------------------------------------------------- */
  --md-sys-shape-xs: 4px;
  --md-sys-shape-sm: 8px;
  --md-sys-shape-md: 12px;
  --md-sys-shape-lg: 16px;
  --md-sys-shape-xl: 20px;
  --md-sys-shape-xxl: 28px;
  --md-sys-shape-full: 999px;

  /* ---- Type scale (Roboto Flex) ---------------------------------------------- */
  --vec-font: 'Roboto Flex', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --md-sys-type-display-lg: 500 clamp(2.6rem, 1.6rem + 4.2vw, 4.5rem)/1.04 var(--vec-font);
  --md-sys-type-display-sm: 500 clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem)/1.14 var(--vec-font);
  --md-sys-type-headline-sm: 400 clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem)/1.45 var(--vec-font);
  --md-sys-type-title-lg: 600 1.375rem/1.27 var(--vec-font);
  --md-sys-type-title-md: 600 1rem/1.5 var(--vec-font);
  --md-sys-type-title-sm: 600 0.875rem/1.43 var(--vec-font);
  --md-sys-type-body-lg: 400 1rem/1.6 var(--vec-font);
  --md-sys-type-body-md: 400 0.875rem/1.5 var(--vec-font);
  --md-sys-type-body-sm: 400 0.75rem/1.4 var(--vec-font);
  --md-sys-type-label-lg: 600 0.875rem/1.43 var(--vec-font);
  --md-sys-type-label-md: 600 0.75rem/1.33 var(--vec-font);
  --md-sys-type-label-sm: 600 0.688rem/1.45 var(--vec-font);

  /* ---- Motion ------------------------------------------------------------- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 450ms;
  --md-sys-motion-duration-extra-long: 700ms;

  /* ---- State-layer opacity ------------------------------------------------- */
  --md-sys-state-hover: 0.08;
}

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