/* ============================================================
 * DUSN UI / tokens.css
 * Design tokens for the Deterministic Utility Settlement Network
 * ============================================================
 *
 * SCOPE
 *   This file defines the visual primitives shared by every rail's
 *   UI surface that mounts on top of DUSN: layout dimensions, semantic
 *   colors, typography, and timing.
 *
 * DESIGN INVARIANTS
 *   1. NO brand colors live here. A rail's brand palette belongs in
 *      that rail's theme.css and overrides these defaults.
 *   2. Semantic colors (pass / fail / warn / neutral) are universal —
 *      verification PASS reads green across rails, FAIL reads red.
 *   3. Layout tokens (sidebar width, header height) are stable across
 *      rails so the chrome stays consistent in the unified feed.
 *
 * USAGE
 *   <link rel="stylesheet" href="/ui/dusn/tokens.css">
 *   <link rel="stylesheet" href="/ui/beautifi/theme.css">  <- overrides
 * ============================================================ */

:root {
  /* ── NEUTRAL SURFACES ───────────────────────────────────
   * Page backgrounds, card surfaces, subtle fills.
   * Default is a warm off-white palette appropriate for the
   * "calm editorial" register DUSN cards tend to occupy. */
  --bg:         #f8f7f4;
  --bg2:        #ffffff;
  --bg3:        #f2f0ec;

  /* ── TEXT ───────────────────────────────────────────────
   * Three tiers, from primary content down to hint text. */
  --text:       #2d3f3e;
  --text2:      #4a5a58;
  --text3:      #8a9a98;

  /* ── BORDERS ─────────────────────────────────────────── */
  --border:     #dddbd6;
  --border2:    #e8e6e0;

  /* ── BRAND HOOKS ─────────────────────────────────────────
   * These tokens have NO meaningful default — they should be
   * overridden by each rail's theme.css. Defining them here
   * (in muted neutral) means the UI degrades gracefully if a
   * theme.css is missing, instead of breaking entirely. */
  --sage:        #6a7a78;
  --sage-light:  #ececea;
  --sage-mid:    #8a9a98;
  --accent:      #a09080;
  --accent-light:#f0ece6;

  /* ── SEMANTIC COLORS (DUSN-OWNED, RAIL-IMMUTABLE) ──────────
   * These convey verification outcome and SHOULD NOT vary
   * between rails. Sponsors reading the unified feed need to
   * trust that green means PASS regardless of which rail. */
  --pass:           #2d7a5a;
  --pass-light:     #e8f5ef;
  --fail:           #c0614a;
  --fail-light:     #fde8e4;
  --warn:           #9a7a2a;
  --warn-light:     #fdf3e0;
  --neutral:        #4a6070;
  --neutral-light:  #eef1f3;

  /* ── LAYOUT ─────────────────────────────────────────────
   * Standard chrome dimensions for the three-column feed shell. */
  --sidebar-w:   33.333vw;
  --header-h:    84px;
}

/* ── BASE RESET ────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  min-height:100vh;
}