/* =========================================================
   TOKENS — one shared palette, type stack, and motion scale
   for index.html, cv-builder.html, and the POL309 pages.
   Light values live on :root so pages without a data-theme
   attribute (the CV Builder) resolve to the light palette;
   dark overrides under [data-theme="dark"].
========================================================= */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* palette — light */
  --bg: oklch(0.979 0.007 88.642);
  --bg-tint: oklch(0.952 0.016 91.553);
  --surface: oklch(0.997 0.004 91.445);
  --ink: oklch(0.239 0.013 93.936);
  --muted: oklch(0.504 0.027 90.887);
  --faint: oklch(0.552 0.029 92.555);
  --line: oklch(0.904 0.025 89.221);
  --line-strong: oklch(0.849 0.035 90.532);
  --accent: oklch(0.526 0.1 82.023);          /* links + interactive */
  --accent-strong: oklch(0.447 0.084 81.238);
  --gold: oklch(0.705 0.135 87.98);            /* signature mark */
  --teal: oklch(0.388 0.036 176.839);         /* secondary accent */
  --rose: oklch(0.544 0.092 34.321);          /* teaching */
  --lapis: oklch(0.46 0.062 253.248);         /* cv */
  --plum: oklch(0.493 0.069 336.066);         /* contact */
  --shadow: 0 1px 2px oklch(0.253 0.033 92.369 / .04), 0 12px 32px oklch(0.253 0.033 92.369 / .05);

  /* ── Motion tokens — transitions.dev shared scale ── */
  /* Durations */
  --duration-stagger: 40ms;   /* per-item stagger offset */
  --duration-micro: 80ms;     /* tooltip/path delay, shake segment, large stagger */
  --duration-quick: 150ms;    /* modal/dropdown close, text swap, tooltip appear */
  --duration-fast: 250ms;     /* icon swap, dropdown/modal open, tabs sliding, page slide */
  --duration-medium: 350ms;   /* panel close, toast close */
  --duration-slow: 400ms;     /* panel open, skeleton content reveal, input clear */
  --duration-very-slow: 500ms;/* emphasis moments, badge appear, text reveal, success check */
  /* Easings */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Distances */
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  /* Scales */
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  /* Blur */
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* Accordion expand */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
  --bg: oklch(0.186 0.01 97.891);
  --bg-tint: oklch(0.214 0.012 91.771);
  --surface: oklch(0.226 0.013 93.957);
  --ink: oklch(0.925 0.022 89.798);
  --muted: oklch(0.708 0.03 93.856);
  --faint: oklch(0.59 0.027 91.736);
  --line: oklch(0.285 0.018 93.32);
  --line-strong: oklch(0.33 0.024 90.724);
  --accent: oklch(0.785 0.129 82.023);
  --accent-strong: oklch(0.842 0.12 81.238);
  --gold: oklch(0.814 0.139 93.786);
  --teal: oklch(0.735 0.06 173.532);
  --rose: oklch(0.711 0.081 34.819);
  --lapis: oklch(0.716 0.06 254.207);
  --plum: oklch(0.736 0.063 334.227);
  --shadow: 0 1px 2px oklch(0 0 0 / .3), 0 18px 40px oklch(0 0 0 / .45);
}