/* ── Theme variables ─────────────────────────────────
   Single source of truth for every CSS custom property
   used by the main app (App.css / index.css) AND the
   static pages (static-pages.css, help.css, etc.).

   Served from /public so both:
     • index.html (the React app)
     • static HTML pages in /public
   can <link> it directly.

   Do NOT redeclare these variables elsewhere. If a new
   colour / token is needed, add it here.
   ─────────────────────────────────────────────────── */

:root {
  /* ── Fonts ──────────────────────────────────── */
  --content-serif-font: "Crimson Pro", Times, Times New Roman, serif;
  --content-sans-serif-font: "Hanken Grotesk", Avenir, Helvetica, Arial, sans-serif;
  --content-monospace-font: "Source Code Pro", Consolas, "Courier New", monospace;

  /* ── Dialog widths ──────────────────────────── */
  --dialog-width-default: 33%;
  --dialog-width-wide: 50%;
  --dialog-width-x-wide: 75%;

  /* ── Light-theme base palette ───────────────── */
  --_bg-start: oklch(0.9294 0.0419 226.59);
  --_bg-end: oklch(0.9794 0.0115 226.59);
  --_card-border: oklch(0.5801 0.1349 225.93);
  --_text-1: oklch(24.33% 0.0247 263.95);
  --_text-2: oklch(33.51% 0.0331 260.91);
  --_text-3: oklch(44.74% 0.0343 261.32);
  --_accent-1: oklch(0.6795 0.1301 226.59);
  --_accent-2: oklch(0.7255 0.1301 226.59);
  --_input-border: oklch(86.87% 0.0187 250.61);
  --_focus: oklch(0.5801 0.1349 225.93);
  --tag-badge-bg: oklch(0.6795 0.1301 226.59 / 0.15);
  --tage-badge-outline: oklch(68.68% 0.1477 272.51 / 0.25);

  /* ── Light-theme tokens (defaults) ──────────── */
  --bg-gradient-start: var(--_bg-start);
  --bg-gradient-end: var(--_bg-end);
  --card-bg: oklch(100% 0 none / 0.98);
  --card-border: oklch(from var(--_card-border) l c h / 0.15);
  --text-primary: var(--_text-1);
  --text-secondary: var(--_text-2);
  --text-tertiary: var(--_text-3);
  --text-link: oklch(0.5801 0.1349 225.93);
  --text-link-hover: oklch(17.76% 0 none);
  --accent-start: var(--_accent-1);
  --accent-end: var(--_accent-2);
  --danger: oklch(63.68% 0.2078 25.33);
  --danger-hover: oklch(57.71% 0.2152 27.33);
  --success: oklch(55% 0.17 145);
  --list-bg-hover: oklch(0.9777 0.0225 248.82);
  --input-bg: oklch(100% 0 none);
  --input-border: var(--_input-border);
  --input-focus-border: var(--_accent-1);
  --focus-color: var(--_focus);
  --code-bg: oklch(from var(--_accent-1) l c h / 0.08);
  --pre-bg: oklch(0% 0 none / 0.04);
  --search-highlight-bg: oklch(85% 0.15 85);
}

/* ── System dark (only when no explicit theme) ──── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-gradient-start:  oklch(from var(--_bg-start) calc(1.2 - l) calc(c * 2.5) calc(h + 13));
    --bg-gradient-end:    oklch(from var(--_bg-end) calc(1.185 - l) calc(c * 1.7) calc(h - 6));
    --card-bg:            oklch(from var(--_bg-start) calc(l * 0.25) calc(c * 2) calc(h + 14) / 0.95);
    --card-border:        oklch(from var(--_card-border) calc(l + 0.37) 0 h / 0.1);
    --text-primary:       oklch(from var(--_text-1) calc(1.24 - l) 0 h);
    --text-secondary:     oklch(from var(--_text-2) calc(1.26 - l) calc(c * 0.38) calc(h - 5));
    --text-tertiary:      oklch(from var(--_text-3) calc(1.32 - l) calc(c * 0.55) calc(h - 11));
    --accent-start:       oklch(from var(--_accent-1) calc(l + 0.11) calc(c * 0.92) h);
    --accent-end:         oklch(from var(--_accent-2) calc(l + 0.1) calc(c * 1.16) h);
    --input-bg:           oklch(from var(--_bg-start) calc(l * 0.31) calc(c * 1.75) calc(h + 15) / 0.8);
    --input-border:       oklch(from var(--_input-border) calc(l + 0.13) 0 h / 0.15);
    --input-focus-border: oklch(from var(--_accent-1) calc(l + 0.11) calc(c * 0.92) h);
    --focus-color:        oklch(from var(--_focus) calc(l + 0.28) calc(c * 0.76) h);
    --code-bg:            oklch(from var(--_accent-1) calc(l + 0.11) calc(c * 0.92) h / 0.1);
    --pre-bg:             oklch(0% 0 none / 0.25);
    --list-bg-hover:      oklch(from var(--_bg-start) calc(l * 0.31) calc(c * 1.5) calc(h + 14) / 0.45);
    --search-highlight-bg: oklch(45% 0.12 85);
  }
}

/* ── Explicit dark theme ─────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-gradient-start:  oklch(from var(--_bg-start) calc(1.2 - l) calc(c * 2.5) calc(h + 13));
  --bg-gradient-end:    oklch(from var(--_bg-end) calc(1.185 - l) calc(c * 1.7) calc(h - 6));
  --card-bg:            oklch(from var(--_bg-start) calc(l * 0.25) calc(c * 2) calc(h + 14) / 0.95);
  --card-border:        oklch(from var(--_card-border) calc(l + 0.37) 0 h / 0.1);
  --text-primary:       oklch(from var(--_text-1) calc(1.24 - l) 0 h);
  --text-secondary:     oklch(from var(--_text-2) calc(1.26 - l) calc(c * 0.38) calc(h - 5));
  --text-tertiary:      oklch(from var(--_text-3) calc(1.32 - l) calc(c * 0.55) calc(h - 11));
  --accent-start:       oklch(from var(--_accent-1) calc(l + 0.11) calc(c * 0.92) h);
  --accent-end:         oklch(from var(--_accent-2) calc(l + 0.1) calc(c * 1.16) h);
  --input-bg:           oklch(from var(--_bg-start) calc(l * 0.31) calc(c * 1.75) calc(h + 15) / 0.8);
  --input-border:       oklch(from var(--_input-border) calc(l + 0.13) 0 h / 0.15);
  --input-focus-border: oklch(from var(--_accent-1) calc(l + 0.11) calc(c * 0.92) h);
  --focus-color:        oklch(from var(--_focus) calc(l + 0.28) calc(c * 0.76) h);
  --code-bg:            oklch(from var(--_accent-1) calc(l + 0.11) calc(c * 0.92) h / 0.1);
  --pre-bg:             oklch(0% 0 none / 0.25);
  --list-bg-hover:      oklch(from var(--_bg-start) calc(l * 0.31) calc(c * 1.75) calc(h + 15) / 0.8);
  --search-highlight-bg: oklch(45% 0.12 85);
}