/* =====================================================================
   comfort.tokens.css - THE authoritative Comfort visual system (single SSoT)
   =====================================================================
   Balen Comfort Remediation - Phase 2 (Part 1.1 of comfort-remediation-architecture.md).
   Rulings applied (Eduardo, 2026-07-07):
     - Typeface set: Newsreader / Geist / Geist Mono (fallbacks Georgia / system / ui-monospace).
       Self-hosted variable woff2 (OFL) under /assets/fonts via css/comfort.fonts.css.
       Newsreader carries opsz+wght; font-optical-sizing:auto wires opsz to font-size.
     - --grad-hero: WIRED, Home hero ONLY (forbidden on dense/financial lists, HS-R14).
     - Allowlist owner: Codex signs per phase; Eduardo ratifies allowlist=0.

   PROD-LEGAL SUBSET (enforced): :root custom properties only; ASCII only; no color-mix()
   (tints are precomputed literals); no CSS nesting; no @import chains in prod (mockups may
   @import this one file). This file is the ONLY place a raw hex color is authored.

   STRUCTURE:
     1. --k-*  = canonical RAW values. The single authored source. Unique names (never collide
        with any legacy token), so they resolve to the Comfort value regardless of cascade order.
        Dark mode overrides ONLY --k-*; every public/semantic token re-resolves automatically.
     2. public tokens (--page, --surface, --accent, ...) = var(--k-*). What mockups + components
        consume directly.
     3. component semantic tokens = what the component library reads (never raw palette).
   The app integration/alias layer (mapping legacy + --bz-* names to var(--k-*)) lives in
   css/comfort.flip.css and is flag-gated + reversible. This file stays pure SSoT.
   ===================================================================== */

:root {
  /* ============ 1. CANONICAL RAW VALUES (--k-*) - single authored source ============ */
  /* surfaces */
  --k-page:#F4F6F7; --k-surface:#FFFFFF; --k-surface-2:#F4F6F5; --k-line:#E6EBED; --k-header:#FFFFFF;
  /* text: exactly three levels */
  --k-text-primary:#14232B; --k-text-secondary:#5C6B72; --k-text-tertiary:#647077; /* AA >=4.5 on surface+page (C6) */
  /* one accent (retires #12B8AE and #1463FF action-blue) */
  --k-accent:#0E9C8E; --k-accent-press:#0B8072; --k-accent-text:#FFFFFF; --k-accent-tint:#E4F4F1;
  /* money direction */
  --k-pos:#157A5F; --k-neg:#BE4038; --k-warn:#8A5A0F; --k-neg-tint:#F8E9E7;
  /* category identity chips (identity, NEVER status) */
  --k-cat-flight:#0E9C8E; --k-cat-ledger:#3B6EA5; --k-cat-settle:#7A5AA6; --k-cat-exchange:#B5852A;
  /* type: ONE set (Newsreader / Geist / Geist Mono) */
  --k-font-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --k-font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --k-font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* shape / radius */
  --k-r-lg:12px; --k-radius:20px;
  /* elevation (precomputed rgba literals) */
  --k-shadow-1:0 1px 2px rgba(20,35,43,0.06);
  --k-shadow-2:0 4px 12px rgba(20,35,43,0.08);
  --k-shadow-card:0 1px 3px rgba(20,35,43,0.07);
  /* hero gradient: WIRED, Home hero ONLY */
  --k-grad-hero:linear-gradient(135deg, #0C5A63 0%, #127C82 45%, #1FA3A3 100%);
  /* SOLID dark-teal hero surface (both themes) for elements that put WHITE text on a hero
     background -- primary buttons (.btn), row-action pills, wizard/reports context headers.
     Distinct from --k-header (the white top-bar surface). White text clears AA on both. */
  --k-hero-surface:#0C5A63; --k-hero-surface-2:#127C82; --k-hero-on:#FFFFFF;

  /* ============ 2. PUBLIC TOKENS (mockups + components consume these) ============ */
  --page:var(--k-page);
  --surface:var(--k-surface);
  --surface-2:var(--k-surface-2);      /* design value; retires code-bent #FBF6F0 */
  --line:var(--k-line);
  --header:var(--k-header);

  --text-primary:var(--k-text-primary);      /* L1: titles, section headers, amounts. never gray. */
  --text-secondary:var(--k-text-secondary);  /* L2 */
  --text-tertiary:var(--k-text-tertiary);    /* L3 (--ink-4 collapses here) */

  --accent:var(--k-accent);
  --accent-press:var(--k-accent-press);
  --accent-on:var(--k-accent-text);   /* WHITE text that sits ON an accent fill (buttons).
     Named --accent-on (NOT --accent-text) to avoid shadowing the legacy --accent-text, which
     means "teal interactive LINK text" -- collapsing them turned .btn-text invisible. */
  --accent-tint:var(--k-accent-tint);

  --pos-text:var(--k-pos);
  --neg-text:var(--k-neg);
  --warn:var(--k-warn);
  --neg-tint:var(--k-neg-tint);

  --cat-flight:var(--k-cat-flight); --cat-ledger:var(--k-cat-ledger);
  --cat-settle:var(--k-cat-settle); --cat-exchange:var(--k-cat-exchange);

  --font-serif:var(--k-font-serif);
  --font-sans:var(--k-font-sans);
  --font-mono:var(--k-font-mono);
  --fw-bold:700;

  --fs-hero:20px;      /* briefing paragraph / hero metric support */
  --fs-section:15px;   /* the token Comfort promised but never added */

  --r-chip:999px; --r-sm:14px; --r-lg:var(--k-r-lg);   /* design 12px; retires code 16px override */
  --radius:var(--k-radius);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* single content-column max-width (F-UI2-006). The one token every centered
     list/content column reads, so column width and card width stay in step. */
  --container-max:720px;

  --shadow-1:var(--k-shadow-1); --shadow-2:var(--k-shadow-2); --shadow-card:var(--k-shadow-card);

  --grad-hero:var(--k-grad-hero);
  --grad-hero-text:#FFFFFF;

  /* ============ 3. COMPONENT SEMANTIC TOKENS (components read THESE, not raw palette) ============ */
  --btn-primary-bg:var(--accent-press);
  --btn-primary-text:var(--accent-on);
  --btn-secondary-bg:var(--surface);
  --btn-secondary-text:var(--accent);
  --btn-secondary-border:var(--line);
  --btn-danger-text:var(--neg-text);
  /* NOTE: cards consume base tokens directly (--surface/--line/--r-lg/--shadow-card).
     No --card-* semantic aliases: those names collide with the legacy palette. */
  --nav-active:var(--accent);
  --nav-idle:var(--text-tertiary);
  --fab-bg:var(--accent-press);
  --fab-text:var(--accent-text);
  /* ink that sits ON a status/accent FILL (never on the page). Global default is
     WHITE in every Classic theme -- byte-identical to the color:#fff literals these
     replaced -- so Classic light AND Classic dark are unchanged. The Balen
     appearances override them in css/balen.skin.app.css section 4. */
  --pos-on:#FFFFFF; --neg-on:#FFFFFF; --accent-on-fill:#FFFFFF; --warn-on:#FFFFFF;
  /* soft neutral BUTTON fill used by js/flight-coordination.js. The global default is
     the exact literal it replaced (#EEF4F5), NOT var(--surface-2) (#F4F6F5), so Classic
     light and Classic dark stay byte-identical. Overridden per appearance in
     css/balen.skin.app.css section 4. */
  --btn-soft-fill:#EEF4F5;
  --money-pos:var(--pos-text);
  --money-neg:var(--neg-text);
  --money-font:var(--font-mono);
  --money-weight:var(--fw-bold);
  --chip-radius:var(--r-chip);
  --section-font:var(--font-serif);
  --section-size:var(--fs-section);
}

/* Dark mode overrides ONLY the canonical --k-* raw values; every public/semantic token
   (declared once above as var(--k-*)) re-resolves automatically. */
:root[data-theme="dark"] {
  --k-page:#0A0E13; --k-surface:#131A21; --k-surface-2:#18202A; --k-line:#222C36; --k-header:#0F151C;
  --k-text-primary:#F2F7F9; --k-text-secondary:#9AA9B2; --k-text-tertiary:#7C8B94; /* AA >=4.5 on dark surface (C6) */
  --k-accent:#2FC8B9; --k-accent-press:#2FC8B9; --k-accent-text:#04140F; --k-accent-tint:#12312C;
  --k-pos:#46C99A; --k-neg:#E8756B; --k-warn:#E8A94E; --k-neg-tint:#2A1F1E;
  --k-shadow-1:0 1px 2px rgba(0,0,0,0.45);
  --k-shadow-2:0 6px 16px rgba(0,0,0,0.50);
  --k-shadow-card:0 1px 3px rgba(0,0,0,0.45);
  --k-grad-hero:linear-gradient(135deg, #031C20 0%, #0C5A63 55%, #127C82 100%);
  /* hero surface stays dark teal in dark mode too, so white hero text keeps AA. */
  --k-hero-surface:#0A3A40; --k-hero-surface-2:#0C5A63;
}