/* =============================================================================
   CivicSuite design tokens — SINGLE SOURCE OF TRUTH
   -----------------------------------------------------------------------------
   Palette: light civic / navy / warm gold. "Modern public infrastructure."

   AUTHORITY
     This file is the token authority for the whole suite. Values are extracted
     verbatim from the canonical prototype (docs/design/ui-ux-prototype/styles.css)
     EXCEPT for three documented WCAG-AA corrections, each marked [AA-FIX] below.
     See docs/design/windows-desktop-design-control.md.

   CONSUMPTION (offline binaries cannot @import at runtime)
     Consumers VENDOR a generated copy of this file, pinned to a civiccore
     version, and a CI --check gate fails the build if the vendored copy drifts.
     - Desktop app (Tauri/WebView2): desktop/src/styles.css consumes a vendored copy.
     - Prototype (docs/design/ui-ux-prototype/styles.css) consumes a vendored copy.
     Any JS/JSON token mirror is GENERATED from this file, never hand-maintained.

   CONTRAST NOTATION
     Ratios below are WCAG 2.x contrast against the noted background. AA needs
     >=4.5:1 for normal text, >=3:1 for large text (>=24px, or >=19px bold) and
     for UI component boundaries. Every value that carries text has been checked.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     COLOR — NEUTRALS (surfaces + ink)
     ------------------------------------------------------------------------ */
  --paper:        #faf8f3;   /* page background            L=0.945 */
  --paper-2:      #f3efe5;   /* alt / raised surface               */
  --paper-3:      #ebe5d6;   /* sunken surface                     */
  --card:         #ffffff;   /* primary surface            L=1.000 */
  --rule:         #e3dccb;   /* hairline rules (>=3:1 vs card: component boundary, OK) */
  --rule-strong:  #cabe9f;   /* emphasized rule                    */

  /* Ink ramp — text. Contrast noted against --paper (the worst common case). */
  --ink:          #1a2330;   /* primary text     vs paper 15.0:1  AAA  */
  --ink-2:        #3a4554;   /* secondary text   vs paper  9.2:1  AAA  */
  --ink-3:        #6b7280;   /* tertiary text    vs paper  4.58:1 AA (this is the FLOOR for text) */
  --ink-4:        #9aa0ab;   /* [AA-FIX] DECORATIVE ONLY — vs paper 2.48:1, FAILS AA.
                                Allowed uses: hairline separators, dividers, disabled
                                glyphs, non-informational icon strokes. NEVER body copy,
                                labels, metadata, or any text a user must read. */

  /* ---------------------------------------------------------------------------
     COLOR — CIVIC (brand)
     ------------------------------------------------------------------------ */
  --navy:         #1a3a52;   /* primary brand. white-on-navy 11.9:1 AAA. Safe for solid buttons + text. */
  --navy-2:       #122a3d;   /* navy pressed / darker brand        */
  --navy-soft:    #e6edf3;   /* navy tint surface (ink-on-tint OK) */

  --gold:         #b08a2e;   /* [AA-FIX] ACCENT / BORDER / LARGE-TEXT ONLY.
                                white-on-gold 3.22:1 — FAILS AA for normal text,
                                passes for large text (3:1) and component borders.
                                For text-bearing gold use --gold-2 (solid) or
                                --gold-strong (on pale gold surfaces). */
  --gold-2:       #8a6a1f;   /* text-bearing gold. white-on-gold-2 5.05:1 AA;
                                gold-2-on-white/card 5.05:1 AA. Use for solid gold
                                buttons and gold text on --card/--paper.          */
  --gold-strong:  #785b16;   /* [AA-FIX] NEW. AA-safe gold text on PALE gold tints.
                                gold-strong-on-gold-soft 5.42:1 AA (gold-2 there is
                                only 4.31:1, a fail). Use for .badge.gold / .vis text
                                and any gold label on --gold-soft.                 */
  --gold-soft:    #f5edd6;   /* gold tint surface                  */
  --seal:         #6b3a1f;   /* seal red-brown (accent, dots)      */

  /* ---------------------------------------------------------------------------
     COLOR — STATUS (text token on matching *-soft surface)
     All pairs below verified AA on their own soft background.
     ------------------------------------------------------------------------ */
  --ok:           #2f6b3a;   /* on --ok-soft   5.24:1 AA */
  --ok-soft:      #e0ecdf;
  --warn:         #8a5a14;   /* on --warn-soft 4.79:1 AA (tight — do not lighten) */
  --warn-soft:    #f5e6c5;
  --err:          #8a2a2a;   /* on --err-soft  6.40:1 AA */
  --err-soft:     #f1d9d9;
  --info:         #1f4a6b;   /* on --info-soft 7.44:1 AA */
  --info-soft:    #dde7ee;
  --neutral-soft: #ece7d8;   /* default badge surface (ink-2 text 8:1+ AA) */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     serif = display/headings, sans = UI/body, mono = data/IDs/hashes
     ------------------------------------------------------------------------ */
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------------------
     DENSITY — comfortable (default). See [data-density="compact"] override.
     ------------------------------------------------------------------------ */
  --row-h:      36px;   /* table/list row height */
  --pad:        16px;   /* container padding     */
  --gap:        12px;   /* stack/row gap         */
  --radius:      8px;   /* control radius        */
  --radius-lg:  12px;   /* card radius           */
}

/* Compact density: overrides ONLY the metrics that change. Colors/type are density-invariant. */
[data-density="compact"] {
  --row-h: 30px;
  --pad:   12px;
  --gap:    8px;
}