/* static/assets/ui-tokens.css
 * Design tokens for the Unnanu UI system. The single source of truth for color: every
 * user-facing surface (search page + Document Studio) consumes these variables and defines
 * no colors of its own — grep-proven zero hex literals in component CSS (UX.7).
 *
 * UX.7 warm theme: the palette below re-points the whole system at a warm, five-family
 * grammar where color encodes meaning permanently — answer=cream, evidence=sage,
 * sources=blue, caution=amber, everything-else=neutral, with clay as the one sparing accent.
 * The --u-* block is authoritative; the legacy names beneath it (--paper, --accent, --pos…)
 * are aliases onto it, so pre-existing rules recolor without a name churn. Per-client palettes
 * ride the same seam: branding.py's AA-checked accent overrides --accent (= var(--u-accent))
 * at runtime — config overrides a token, never a CSS fork (invariant 7).
 *
 * UX.10a: the same tokens re-pointed at the answer-first reskin palette — cool ink on a
 * near-white paper, one brand-blue accent (the "clay" names in the comments below are
 * historical; the token NAMES are unchanged so no component rule moved). Meaning colours:
 * green = verified only, amber = age/caution, red = real errors only.
 * Every text/surface pair here clears WCAG AA — see tests/test_a11y.py (the VPAT gate).
 * The [data-theme="dark"] block is inert until UX.6 sets that attribute; it still carries the
 * old cool dark values and must be re-tuned to the warm --u-* families when UX.6 activates it.
 */
:root{
  /* ===== UX.7 warm theme — the source-of-truth palette =====
     Color encodes MEANING permanently: answer=cream, evidence=sage, sources=blue,
     caution=amber, everything-else=neutral; clay is the one accent, used sparingly.
     Every token below this block re-points an existing name (--paper, --accent, --pos…)
     at one of these, so the whole UI recolors without a name churn. The fold rule (UX.7):
     the non-palette meanings the code used to carry in their own hues — people/experts,
     knowledge-capture, contested/error — collapse into these five families; the meaning
     is carried by words + icons, never hue alone. */
  --u-page:            #FAFAF7;   /* page background */
  --u-card-answer:     #FFFFFF;   /* the finding/answer card + generic raised surfaces */
  --u-card-evidence:   #E9EDE3;   /* why-this-answer / verification (sage) */
  --u-card-source:     #E4E9EE;   /* source & exhibit cards, people (dusty blue) */
  --u-card-caution:    #FBF0DA;   /* freshness / flags / warnings / contested (amber) */
  --u-card-neutral:    #F2F1EC;   /* chips, rails, secondary panels */
  --u-text:            #1C2230;   /* primary on page/answer */
  --u-text-soft:       #434A5B;   /* secondary on page/answer */
  --u-text-evidence:   #3A4635;   /* on sage  (heading tone --u-head-evidence) */
  --u-text-source:     #2E3F4E;   /* on blue  (heading tone --u-head-source) */
  --u-text-caution:    #744709;   /* on amber (heading tone --u-head-caution) */
  --u-verified-bg:     #E5F0E8;   /* verified badge */
  --u-verified-text:   #1F5E3C;
  --u-highlight:       #FFF1B8;   /* quote highlight in passage context */
  --u-border:          #E4E2DB;   /* hairlines everywhere */
  --u-radius: 12px;
  /* ===== UX.8 button/CTA system — clay split three ways by role, never by whim =====
     Philosophy: clay marks the single thing we most want the user to do next; everything
     else stays quiet. Green = verified only. Red = wrong only. Amber = stale only.
     - PRIMARY (--u-accent-strong fill + white text): exactly ONE per view — search owns
       it. Two solid clay buttons on one screen means one of them is wrong.
     - SECONDARY (the workhorse — export chips, "Show More", etc.): transparent bg,
       hairline --u-border, --u-text, hover --u-card-neutral. No fill, no clay.
     - TERTIARY/links: --u-accent-text. --u-accent itself (#C15F3C) fails AA at body-text
       size (3.64:1 on --u-page) — it is for icons and large display accents ONLY, never
       for text a reader has to read.
     - CAUTION actions (Outdated, freshness) stay in the amber family (--u-text-caution).
       --u-danger-text appears ONLY on "Wrong" and true errors. */
  --u-accent:          #2461CC;   /* brand blue — fills, icons, focus ring */
  --u-accent-strong:   #2461CC;   /* solid button fill — white text clears AA */
  --u-accent-hover:    #1C4FA8;
  --u-accent-text:     #1F54B3;   /* LINKS and accent-coloured text — AA at body size */
  --u-accent-text-rgb: 31,84,179; /* same hue, decomposed for rgba() tints/hairlines —
                                     mirrors --u-shadow's pattern, no magic decimals in CSS */
  --u-danger-text:     var(--u-text-alert);   /* "Wrong" flag + true errors ONLY — reuses
                                     the freshness alert-red family (UX.7), not a new hue */
  /* SEARCH button — the brand blue from the unnanu wordmark (#266ADC), not the clay
     accent. Scoped to this one button; every other primary/secondary/tertiary rule in
     this file is unchanged. White text clears AA (5.03:1). */
  --u-cta:             #2461CC;
  --u-cta-hover:       #1C4FA8;
  --u-on-cta:          #FFFFFF;
  /* Derived helpers a working system needs — kept in this block so NO component hardcodes
     a hex. Tertiary ink, a stronger hairline, the family heading tones, an accent tint for
     link/chip hover, on-accent text, family border lines, and a warm shadow rgb triple. */
  --u-text-muted:      #62697A;   /* tertiary on page/answer (meta, labels) */
  --u-border-strong:   #CBC8BE;   /* stronger hairline (dividers, chip outlines) */
  --u-border-input:    #868B98;   /* a form control's own boundary — WCAG 1.4.11 needs 3:1, which a hairline can't give */
  --u-head-evidence:   #3D4E35;
  --u-head-source:     #33475A;
  --u-head-caution:    #6A4E1F;
  --u-accent-tint:     #EAF0FB;   /* accent wash — chip / link-hover backgrounds */
  --u-accent-deep:     #1C4FA8;   /* accent hover/pressed */
  --u-on-accent:       #FFFFFF;   /* text + glyphs on the accent */
  --u-line-evidence:   #CBD6C0;
  --u-line-source:     #C6D2DC;
  --u-line-caution:    #E4CFA6;
  /* alert red — reintroduced for freshness severity (source > 24 months). Muted brick, not
     neon, distinct from the clay accent; AA-checked (text 6.39:1 on its own surface). */
  --u-card-alert:      #FBE9E6;
  --u-text-alert:      #9B2C1F;
  --u-line-alert:      #E0B4A6;
  /* UX.10b file-type icons: the band behind a document-type label (PDF/DOC/…). A recognition
     aid only — every icon also carries role="img" + an aria-label naming the type. White band
     text clears AA on each (tests/test_a11y.py). */
  --u-ficon-pdf:       #B42318;
  --u-ficon-doc:       #1D5BBF;
  --u-ficon-xls:       #1E7040;
  --u-ficon-ppt:       #B4441A;
  --u-ficon-mail:      #5B4BB5;
  --u-ficon-media:     #56607A;
  --u-shadow: 28,34,48;           /* ink-tinted shadow rgb */
  /* type — Public Sans for the interface, Source Serif 4 ONLY for words quoted verbatim from a
     document, Plex Mono ONLY for true identifiers (>=12px). DIR re-points --font-body to Inter. */
  --font-quote:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* radii + elevation */
  --r-sm:9px; --r:12px; --r-lg:16px;
  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* UI.10a: a dedicated alias for the two real "card" surfaces (.doc, .fc) so a theme can
     retune card roundness (DIR's reference is 14px) without touching --r-lg's other
     consumer (.modal > .panel, not a themed "card" per the slice doc's token table). */
  --radius-card:var(--r-lg);
  --sh-xs:0 1px 2px rgba(var(--u-shadow),.05);
  --sh-sm:0 1px 3px rgba(var(--u-shadow),.08),0 1px 2px rgba(var(--u-shadow),.05);
  --sh:0 4px 14px rgba(var(--u-shadow),.08),0 1px 3px rgba(var(--u-shadow),.06);
  --sh-md:0 14px 34px rgba(var(--u-shadow),.12),0 3px 8px rgba(var(--u-shadow),.06);
  --sh-lg:0 28px 64px rgba(var(--u-shadow),.18),0 6px 16px rgba(var(--u-shadow),.08);
  /* UX.8: a two-layer halo (cream gap + clay ring) reads on every card tint, where a thin
     translucent ring used to disappear against a similarly-toned background — keyboard
     focus visibility is a VPAT line item. */
  --u-focus-ring: 0 0 0 2px var(--u-card-answer), 0 0 0 4px var(--u-accent);
  --ring:var(--u-focus-ring);
  /* ===== existing names re-pointed at the warm palette (structural chrome) ===== */
  --paper:var(--u-page); --surface:var(--u-card-answer); --surface-2:var(--u-card-neutral);
  --ink:var(--u-text); --ink-2:var(--u-text-soft); --muted:var(--u-text-muted);
  --rule:var(--u-border); --rule-strong:var(--u-border-strong);
  /* --accent is the legacy text/link alias — repointed at --u-accent-text (AA-safe), NOT
     --u-accent (decorative-only, fails AA as text/body copy — see the CTA block above).
     Solid-fill buttons must reference --u-accent-strong explicitly, never this alias. */
  --accent:var(--u-accent-text); --accent-50:var(--u-accent-tint);
  /* verification stamps — folded to two states + neutral (sage verified, amber caution) */
  --verified:var(--u-verified-text); --verified-bg:var(--u-verified-bg); --verified-line:var(--u-line-evidence);
  --review:var(--u-text-caution);   --review-bg:var(--u-card-caution);   --review-line:var(--u-line-caution);
  --contested:var(--u-text-caution);--contested-bg:var(--u-card-caution);--contested-line:var(--u-line-caution);
  /* back-compat brand ramp — the old cobalt "interactive" ramp becomes a quiet warm-ink
     ramp so secondary controls read as calm neutral; true primary actions use --accent
     (clay) directly, preserving the one-accent-per-view rule. */
  --brand-50:var(--u-card-neutral); --brand-100:#ECEBE5; --brand-200:#E4E2DB; --brand-300:#CBC8BE;
  --brand-400:#9AA0AD; --brand-500:#62697A; --brand-600:#4E5566; --brand-700:#3A4152;
  --brand-800:#272D3C; --brand-ink:var(--u-text);
  --canvas:var(--paper); --bg:var(--paper); --card:var(--surface);
  --line:var(--rule); --line-strong:var(--rule-strong);
  --pos:var(--verified); --pos-bg:var(--verified-bg); --pos-line:var(--verified-line);
  --warn:var(--review); --warn-bg:var(--review-bg); --warn-line:var(--review-line);
  --neg:var(--contested); --neg-bg:var(--contested-bg); --neg-line:var(--contested-line);
  --title:var(--ink); --chip:var(--u-card-neutral); --chipline:var(--u-border); --radius:var(--r);
  --font-sans:var(--font-body);
}

/* Dark palette (UX.6 activates this by setting data-theme="dark" on <html>; inert here).
   Derived, not inverted — verification colors are re-tuned for dark contrast, not just
   value-flipped. */
[data-theme="dark"]{
  --paper:#111419; --surface:#181C23; --surface-2:#1D222A;
  --ink:#EDEFF3; --ink-2:#B7BECC; --muted:#8B93A3;
  --rule:#2B313D; --rule-strong:#3A4150;
  --accent:#7C90F0; --accent-50:#1B2140;
  --verified:#5FBE8F; --verified-bg:#132A22; --verified-line:#26473A;
  --review:#E0B84D;   --review-bg:#332A0E;   --review-line:#54461C;
  --contested:#E28A96;--contested-bg:#3A1B21; --contested-line:#5C2C34;
}