/* ===========================================================================
   theme.css — monochrome token system for the attribution reference.
   Dark by default. One surface colour for header, sidebar and main (the shell
   reads as a single dark plane, like the oklch.fyi reference). No hue in the
   chrome: emphasis is carried by lightness and a hairline, never colour.

   A sanctioned accent palette (the Notion-style table, converted to OKLCH) is
   defined at the bottom for graphics/data-viz only — the prose and controls
   stay monochrome.
   =========================================================================== */

@font-face {
  font-family: "Uncut Sans";
  src: url("../fonts/UncutSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutral ramp, 1 = darkest → 12 = lightest (kept for gradients/fills). */
  --color-1: oklch(0.145 0 0);
  --color-2: oklch(0.178 0 0);
  --color-3: oklch(0.213 0 0);
  --color-4: oklch(0.248 0 0);
  --color-5: oklch(0.285 0 0);
  --color-6: oklch(0.323 0 0);
  --color-7: oklch(0.40 0 0);
  --color-8: oklch(0.48 0 0);
  --color-9: oklch(0.58 0 0);
  --color-10: oklch(0.68 0 0);
  --color-11: oklch(0.80 0 0);
  --color-12: oklch(0.94 0 0);

  /* Non-colour tokens (radii kept tight—a couple px less than before) */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Uncut Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* ---- DARK (default) ---- */
  --bg: oklch(0.162 0 0);            /* single shell surface (deepened) */
  --bg-sidebar: var(--bg);          /* header = sidebar = main */
  --bg-elevated: oklch(0.196 0 0);  /* cards / modules lift by one step */
  --bg-hover: oklch(1 0 0 / 0.045);
  --bg-active: oklch(1 0 0 / 0.08);

  --border: oklch(1 0 0 / 0.10);
  --border-light: oklch(1 0 0 / 0.055);

  --text: oklch(0.95 0 0);          /* headings / high emphasis */
  --text-secondary: oklch(0.84 0 0);/* body copy */
  --text-tertiary: oklch(0.60 0 0); /* meta / muted */
  --text-disabled: oklch(0.42 0 0);

  /* "Accent" is monochrome: near-white for active text, a white wash for the
     active surface, and a neutral hairline. No colour. */
  --color-accent: oklch(0.96 0 0);
  --color-accent-hover: oklch(0.88 0 0);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-surface: oklch(1 0 0 / 0.07);
  --accent-surface-border: oklch(1 0 0 / 0.10);
  --accent-selected: var(--accent-surface);
  --on-accent: oklch(0.16 0 0);     /* dark text on a light (white) fill */

  /* Kept for potential destructive UI only — not used in data-viz. */
  --danger: oklch(0.72 0.17 26);
  --danger-bg: oklch(1 0 0 / 0.06);

  --tag-bg: oklch(1 0 0 / 0.06);
  --tag-text: oklch(0.72 0 0);

  /* Chip / segmented-pill fills — theme-aware so selected states read in both
     light and dark. The neutral ramp above is fixed (dark), so these override. */
  --pill-active-bg: var(--color-5);
  /* grade chips — portfolio-pill treatment: a faint hue-tinted translucent
     fill + a white hairline edge + lifted, saturated ink (like the amber
     "Auto" pill). Modelled = amber, measured = teal-green, assumed = red. */
  --grade-border: oklch(1 0 0 / 0.10);
  --grade-measured-bg: oklch(0.72 0.12 172 / 0.13); --grade-measured-text: oklch(0.82 0.13 172);
  --grade-modelled-bg: oklch(0.80 0.15 92 / 0.15);  --grade-modelled-text: oklch(0.87 0.16 92);
  --grade-assumed-bg:  oklch(0.72 0.16 25 / 0.14);  --grade-assumed-text:  oklch(0.80 0.16 25);

  /* portfolio accent blue — the "coming soon" pill */
  --accent-blue-text: oklch(0.80 0.161 259.792);
  --btn-blue: oklch(0.718 0.146 259.792 / 0.12);
  --btn-blue-border: oklch(1 0 0 / 0.10);

  --switch-knob: oklch(0.95 0 0);
  --focus-ring: oklch(1 0 0 / 0.22);
  --focus-ring-neutral: oklch(1 0 0 / 0.18);
  --img-outline: oklch(1 0 0 / 0.10);

  --shadow: 0 0 0 1px oklch(1 0 0 / 0.06);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.06);

  color-scheme: dark;
}

/* ---- LIGHT ---- */
:root[data-theme="light"] {
  --bg: oklch(0.988 0 0);
  --bg-sidebar: var(--bg);
  --bg-elevated: oklch(1 0 0);
  --bg-hover: oklch(0 0 0 / 0.035);
  --bg-active: oklch(0 0 0 / 0.06);

  --border: oklch(0 0 0 / 0.10);
  --border-light: oklch(0 0 0 / 0.06);

  --text: oklch(0.20 0 0);
  --text-secondary: oklch(0.34 0 0);
  --text-tertiary: oklch(0.55 0 0);
  --text-disabled: oklch(0.72 0 0);

  --color-accent: oklch(0.20 0 0);
  --color-accent-hover: oklch(0.32 0 0);
  --accent-surface: oklch(0 0 0 / 0.06);
  --accent-surface-border: oklch(0 0 0 / 0.10);
  --on-accent: oklch(0.99 0 0);

  --danger: oklch(0.55 0.20 27);
  --danger-bg: oklch(0 0 0 / 0.05);

  --tag-bg: oklch(0 0 0 / 0.05);
  --tag-text: oklch(0.40 0 0);

  --pill-active-bg: oklch(0.87 0 0);
  --grade-border: oklch(0 0 0 / 0.10);
  --grade-measured-bg: oklch(0.62 0.12 172 / 0.15); --grade-measured-text: oklch(0.42 0.11 172);
  --grade-modelled-bg: oklch(0.78 0.15 92 / 0.24);  --grade-modelled-text: oklch(0.48 0.12 85);
  --grade-assumed-bg:  oklch(0.62 0.18 25 / 0.15);  --grade-assumed-text:  oklch(0.50 0.19 25);

  --accent-blue-text: oklch(0.50 0.16 259.792);
  --btn-blue: oklch(0.718 0.146 259.792 / 0.14);
  --btn-blue-border: oklch(0 0 0 / 0.10);

  --focus-ring: oklch(0 0 0 / 0.20);
  --focus-ring-neutral: oklch(0 0 0 / 0.14);
  --img-outline: oklch(0 0 0 / 0.10);

  --shadow: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.12), 0 0 0 1px oklch(0 0 0 / 0.06);

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Sanctioned accent palette (Notion dark table → OKLCH). For graphics and
   data-viz only. `-text` is the vivid ink; `-bg` is the muted fill.
   --------------------------------------------------------------------------- */
:root {
  --palette-gray:   oklch(0.694 0.004 220);  --palette-gray-bg:   oklch(0.408 0.009 229);
  --palette-brown:  oklch(0.581 0.047 44);   --palette-brown-bg:  oklch(0.375 0.004 17);
  --palette-orange: oklch(0.792 0.152 63);   --palette-orange-bg: oklch(0.420 0.032 69);
  --palette-yellow: oklch(0.899 0.162 95);   --palette-yellow-bg: oklch(0.449 0.041 103);
  --palette-green:  oklch(0.680 0.093 180);  --palette-green-bg:  oklch(0.397 0.028 193);
  --palette-blue:   oklch(0.664 0.101 238);  --palette-blue-bg:   oklch(0.394 0.030 234);
  --palette-purple: oklch(0.626 0.159 302);  --palette-purple-bg: oklch(0.383 0.041 294);
  --palette-pink:   oklch(0.657 0.191 350);  --palette-pink-bg:   oklch(0.385 0.043 338);
  --palette-red:    oklch(0.722 0.173 26);   --palette-red-bg:    oklch(0.402 0.034 19);
}

html.theme-ready,
html.theme-ready body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}