/* LFL canonical design tokens + brand fonts (LFL-SITE-IDENTITY-REDESIGN.md P1, spec §2/§3).
   Loaded on every page BEFORE style.css - this file is the single source of truth for color
   and type. Dark values below are copied VERBATIM from the lfl-terminal extension's
   .lfl-theme-default block (~/projects/lfl-terminal/extension/content/terminal.css) - that repo
   is the canonical palette (spec §0.1); this file follows it, never the other way round.
   tests/test_content_site.py's token-sync gate diffs the dark block below against the extension
   whenever that repo exists locally, and skips (visibly) when it doesn't. (Sync-gap fix
   2026-07-17, discovered while building the refinements pass: --lfl-num/--lfl-sub were added to
   the extension's color grammar v2 on 2026-07-16 and never mirrored here - added verbatim in
   both blocks below, matching the gate's existing per-token diff convention. Neither token has a
   site consumer yet; they exist so future site copy can reference them without another gate trip.)

   Light values below are the extension's OWN .lfl-theme-paper block, verbatim - the same design
   system's existing light theme, not a fresh derivation invented for the site. WCAG AA (4.5:1
   normal text) verified against --lfl-bg: accent 4.76:1, fg 15.6:1, cmd 6.0:1, ok 4.9:1,
   error 6.0:1, titlebar-fg-on-titlebar-bg 7.2:1. --lfl-dim sits at 3.2:1 on light --lfl-bg and
   3.9:1 on dark --lfl-bg (both sub-AA) - reserved for decorative glyphs (the "# "/"$ " prompt
   prefixes, bracket affordances) and genuinely secondary metadata/chrome (timestamps, field-name
   labels, badge text), never for descriptive body copy a visitor is meant to read. (Correction
   2026-07-17: an earlier version of this comment claimed dim was "never body text" - that was
   false, style.css used it in .lede/.card .rep/.pp-lede and more; those were swept onto --muted
   below in the refinements pass that made this correction.) --muted (= var(--lfl-info), a
   semantic alias only - zero new color, --lfl-info already lived in the canonical verbatim block
   above) is the AA tier for that descriptive copy: measured 2026-07-17 with the WCAG relative-
   luminance formula at 8.71:1 on dark bg, 7.86:1-8.39:1 on dark surfaces (surface/surface-2),
   8.13:1 on light bg, 7.19:1 on light titlebar. Dark stays the only brand-canonical rendering
   (spec §0.5); light is kept fully functional for readers. */

:root, [data-theme="dark"] {
  /* canonical --lfl-* raw tokens (verbatim: .lfl-theme-default) */
  --lfl-bg:#0b0e14;          --lfl-fg:#dbe4f0;
  --lfl-accent:#e0a339;      --lfl-accent-bright:#f5a623;
  --lfl-titlebar-bg:#151a24; --lfl-titlebar-fg:#8fa3c0;
  --lfl-dim:#5d7290;         --lfl-dim-input:#4b5768;
  --lfl-cmd:#8fd0ff;         --lfl-info:#9fb0c3;
  --lfl-error:#ff6b6b;       --lfl-ok:#7ee787;
  --lfl-border:#2a3140;      --lfl-input-bg:#0e131c;
  --lfl-proposal-bg:#1a1408; --lfl-proposal-fg:#f2d9a8; --lfl-proposal-detail:#c9b28a;
  --lfl-approve-bg:#1c3a1c; --lfl-reject-bg:#3a1c1c;
  --lfl-num:#e0a339;         --lfl-sub:#6fa8d8;

  /* semantic aliases onto the names above - existing style.css/build.py keep working unchanged */
  --bg:var(--lfl-bg); --surface:var(--lfl-titlebar-bg); --surface-2:var(--lfl-input-bg);
  --border:var(--lfl-border); --ink:var(--lfl-fg); --dim:var(--lfl-dim); --muted:var(--lfl-info); --faint:var(--lfl-dim-input);
  --accent:var(--lfl-accent); --accent-dim:var(--lfl-accent-bright); --accent-ink:#170f02;
  --ok:var(--lfl-ok); --bad:var(--lfl-error);
  --cat-maintenance:var(--lfl-cmd); --cat-complaint:var(--lfl-error);
  --shadow:none;
  color-scheme:dark;
}

[data-theme="light"] {
  /* canonical --lfl-* raw tokens (verbatim: .lfl-theme-paper) */
  --lfl-bg:#f7f5f0;          --lfl-fg:#1c1c1c;
  --lfl-accent:#a15c00;      --lfl-accent-bright:#c97a00;
  --lfl-titlebar-bg:#ece7dc; --lfl-titlebar-fg:#4a4a4a;
  --lfl-dim:#8a8a8a;         --lfl-dim-input:#8a8a8a;
  --lfl-cmd:#0b5fa5;         --lfl-info:#4a4a4a;
  --lfl-error:#b3261e;       --lfl-ok:#1e7b34;
  --lfl-border:#d8d2c4;      --lfl-input-bg:#ffffff;
  --lfl-proposal-bg:#fff8e6; --lfl-proposal-fg:#3a3a3a; --lfl-proposal-detail:#6b5c3f;
  --lfl-approve-bg:#e3f3e6; --lfl-reject-bg:#f8e4e2;
  --lfl-num:#a15c00;         --lfl-sub:#4a86c4;

  --bg:var(--lfl-bg); --surface:var(--lfl-titlebar-bg); --surface-2:var(--lfl-input-bg);
  --border:var(--lfl-border); --ink:var(--lfl-fg); --dim:var(--lfl-dim); --muted:var(--lfl-info); --faint:var(--lfl-dim-input);
  --accent:var(--lfl-accent); --accent-dim:var(--lfl-accent-bright); --accent-ink:#ffffff;
  --ok:var(--lfl-ok); --bad:var(--lfl-error);
  --cat-maintenance:var(--lfl-cmd); --cat-complaint:var(--lfl-error);
  --shadow:none;
  color-scheme:light;
}

:root {
  /* brand type: LFL Term (mono - terminal, headings, nav, labels, code) + LFL Aile (article
     prose). Self-built Iosevka faces (tools/font/), same-origin only. Old system stacks stay as
     the fallback so a no-font-yet paint never looks broken. */
  --font-mono:"LFL Term",ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --font-body:"LFL Aile",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* square corners everywhere (spec §4) - every radius consumer in style.css reads one of these */
  --radius-sm:0; --radius-md:0; --radius-lg:0;
  --space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:36px;
}

/* @font-face - font-display:swap so text never blocks on the font request; only the two 400
   weights are preloaded (build.py), everything else loads lazily on first use. */
@font-face{font-family:"LFL Term";src:url("/fonts/lfl-term-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LFL Term";src:url("/fonts/lfl-term-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"LFL Aile";src:url("/fonts/lfl-aile-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LFL Aile";src:url("/fonts/lfl-aile-400i.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"LFL Aile";src:url("/fonts/lfl-aile-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}