/* theme.css — design tokens (David's §10.2). Light + dark, with data-theme beating OS preference.
   Steve sets the token scaffold; David tunes/extends the full system against the mockup.
   The data-theme attribute (set by prefs.js) always wins over prefers-color-scheme. */

:root {
  /* Surfaces / ink (§10.2) */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --surface-3: #e9ecf2;
  --ink: #171a21;
  --ink-soft: #5a6172;
  --ink-faint: #8a92a3;
  --line: #e4e7ee;

  /* Accent (iris) + status */
  --accent: #5b5bd6;
  --accent-2: #8b5cf6;
  --accent-soft: #eceafd;      /* tinted accent wash (chips, focus rings) */
  --accent-ink: #fff;          /* text/icons drawn ON the accent (task #146) — dark for light accents */
  --line-soft: #eef1f5;        /* faintest hairline */
  --ok: #1f9d63;
  --warn: #c07d10;
  --danger: #d64545;

  /* Typed-object categorical palette (§10.2) — the load-bearing color */
  --type-person: #3b82f6;
  --type-organization: #d9930a;
  --type-place: #1f9d63;
  --type-vehicle: #64748b;
  --type-animal: #0ea5a4;
  --type-thing: #8b5cf6;
  --type-document: #e0679a;

  /* Spacing scale (4px grid) + radii */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;
  --r-lg: 14px; --r-md: 9px; --r-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(20,24,40,.06), 0 1px 3px rgba(20,24,40,.05);
  --shadow-1: 0 1px 2px rgba(16,18,27,.06), 0 2px 8px rgba(16,18,27,.05);
  --shadow-2: 0 4px 16px rgba(16,18,27,.10);
  --shadow: 0 2px 6px rgba(20,24,40,.06), 0 8px 24px rgba(20,24,40,.08);
  --shadow-lg: 0 12px 40px rgba(20,24,40,.16);

  --font-ui: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-brand: 'Nunito', var(--font-ui);
  --font-mono: 'Courier Prime', ui-monospace, 'Courier New', monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1116;
    --surface: #171a21;
    --surface-2: #1e2129;
    --surface-3: #262a34;
    --ink: #eef1f6;
    --ink-soft: #a3abbd;
    --ink-faint: #6c7486;
    --line: #2a2f3a;
    --line-soft: #232833;
    --accent: #7c7cf0;
    --accent-2: #a78bfa;
    --accent-soft: #242247;
    --ok: #3cc887; --warn: #eab040; --danger: #e86a6a;
    --type-person: #5b9bf8; --type-organization: #eab040; --type-place: #3cc887;
    --type-vehicle: #8b97ab; --type-animal: #2bc4c2; --type-thing: #a78bfa; --type-document: #ef86ac;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-2: 0 4px 18px rgba(0,0,0,.5);
    --shadow: 0 2px 8px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.4);
    --shadow-lg: 0 14px 44px rgba(0,0,0,.55);
  }
}

/* Explicit dark theme (toggle) — same values, wins regardless of OS. */
:root[data-theme="dark"] {
  --bg: #0f1116; --surface: #171a21; --surface-2: #1e2129; --surface-3: #262a34;
  --ink: #eef1f6; --ink-soft: #a3abbd; --ink-faint: #6c7486; --line: #2a2f3a; --line-soft: #232833;
  --accent: #7c7cf0; --accent-2: #a78bfa; --accent-soft: #242247; --ok: #3cc887; --warn: #eab040; --danger: #e86a6a;
  --type-person: #5b9bf8; --type-organization: #eab040; --type-place: #3cc887;
  --type-vehicle: #8b97ab; --type-animal: #2bc4c2; --type-thing: #a78bfa; --type-document: #ef86ac;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-2: 0 4px 18px rgba(0,0,0,.5);
  --shadow: 0 2px 8px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.4);
  --shadow-lg: 0 14px 44px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------------------
   Accent colors (task #146). A user-chosen accent overrides --accent / --accent-2
   for BOTH themes; --accent-soft is derived from --accent + the current --surface
   via color-mix so the tinted wash adapts to light/dark automatically. Purple is
   the DEFAULT and has NO override block here — it keeps its per-theme shades set
   above (#5b5bd6 light / #7c7cf0 dark), exactly as Shaun likes it.
   These blocks are placed AFTER the theme rules so, at equal specificity, source
   order lets the chosen accent win over the light/dark purple defaults.
   --accent-ink is the text/icon color drawn ON the accent: white for every accent
   except Yellow, which uses a dark ink so button/badge labels stay legible.
   Every accent is picked to read well on light AND dark surfaces. */
:root[data-accent="indigo"] { --accent: #4f46e5; --accent-2: #6366f1; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }
:root[data-accent="blue"]   { --accent: #2563eb; --accent-2: #3b82f6; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }
:root[data-accent="teal"]   { --accent: #0d9488; --accent-2: #14b8a6; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }
:root[data-accent="green"]  { --accent: #059669; --accent-2: #10b981; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }
:root[data-accent="yellow"] { --accent: #a16207; --accent-2: #ca8a04; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; } /* a legible gold: --accent is also used as TEXT (nav/links), where bright yellow fails contrast on light surfaces */
:root[data-accent="orange"] { --accent: #ea580c; --accent-2: #f97316; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }
:root[data-accent="red"]    { --accent: #dc2626; --accent-2: #ef4444; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }
:root[data-accent="pink"]   { --accent: #db2777; --accent-2: #ec4899; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-ink: #fff; }

/* Salvaged fonts (David finalizes usage). font-display swap so text shows immediately. */
@font-face { font-family: 'Nunito'; src: url('../assets/fonts/Nunito.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('../assets/fonts/CourierPrime.ttf') format('truetype'); font-display: swap; }