/* ════════════════════════════════════════════════════════════════════
   ZIION DESIGN SYSTEM — Tokens · "CIVIC LEDGER"
   A trust operating system for builders: civic, verified, capital-ready.
   The interface should feel like infrastructure, not atmosphere.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas · Civic Ledger ────────────────────────────────────── */
  --bg-0:       #DDE3D8;            /* low field behind the ledger */
  --bg-1:       #F3F5F0;            /* page canvas */
  --bg-2:       #FCFCF8;            /* primary surface */
  --bg-3:       #E8ECE4;            /* raised / rail */
  --bg-4:       #D9E1D5;            /* overlay / inset */

  --line:       rgba(24,32,26,0.10);
  --line-2:     rgba(24,32,26,0.18);

  --ink:        #18201A;            /* civic ink */
  --ink-2:      rgba(24,32,26,0.68);
  --ink-3:      rgba(24,32,26,0.44);
  --ink-4:      rgba(24,32,26,0.24);

  /* One action accent. Gold is semantic and reserved for capital/tier states. */
  --accent:        #1F8A5B;
  --accent-2:      #176A45;
  --accent-rgb:    31,138,91;
  --accent-on:     #FBFEFA;
  --accent-glow:   rgba(var(--accent-rgb), 0.16);
  --accent-tint-1: rgba(var(--accent-rgb), 0.07);
  --accent-tint-2: rgba(var(--accent-rgb), 0.12);
  --accent-tint-3: rgba(var(--accent-rgb), 0.20);
  --accent-tint-4: rgba(var(--accent-rgb), 0.28);

  --gold:       #9A6A1F;            /* capital / trust / tier ONLY */
  --gold-rgb:   154,106,31;
  --critical:   #B64232;            /* destructive */
  --live:       #21A664;            /* live / active data */

  /* ── Ledger atmosphere: quiet grid, not a decorative landscape ─── */
  --scene: none;
  --landscape:
     radial-gradient(900px 520px at 12% 0%, rgba(var(--accent-rgb),0.10), transparent 62%),
     linear-gradient(90deg, rgba(24,32,26,0.035) 1px, transparent 1px),
     linear-gradient(180deg, rgba(24,32,26,0.035) 1px, transparent 1px),
     linear-gradient(180deg, #F7F8F4 0%, var(--bg-1) 44%, #E7ECE2 100%);

  /* ── Civic glass: light diffusion, not frosted scenery ─────────── */
  --glass-bg:     rgba(252,252,248,0.86);
  --glass-bg-2:   rgba(252,252,248,0.68);
  --glass-tint:   rgba(var(--accent-rgb),0.08);
  --glass-border: rgba(24,32,26,0.10);
  --glass-edge:   inset 0 1px 0 rgba(255,255,255,0.78), inset 0 0 0 1px rgba(255,255,255,0.24);
  --blur:         blur(18px) saturate(116%);
  --blur-strong:  blur(26px) saturate(124%);

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* locked (3) */
  --font-serif: 'Marcellus', Georgia, 'Times New Roman', serif;   /* locked (H) — single weight, no fake bold */
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;    /* meta / code */
  --font-label: 'JetBrains Mono', 'Space Mono', monospace;        /* civic labels */
  --font-pixel: 'JetBrains Mono', 'SF Mono', Menlo, monospace;    /* numeric readouts */

  --t-mono:     11px;
  --t-meta:     12px;
  --t-body:     14px;
  --t-lead:     16px;
  --t-h3:       19px;
  --t-h2:       24px;
  --t-h1:       32px;
  --t-display:  48px;

  /* ── Space (Ma) ────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 96px;

  /* ── Radius: restrained, product-grade ─────────────────────────── */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;

  /* ── Motion (Shizen) ───────────────────────────────────────────── */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-in:  cubic-bezier(.55,.06,.68,.19);
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 320ms; --t-reveal: 420ms;

  /* ── Layout ────────────────────────────────────────────────────── */
  --nav-w: 240px; --header-h: 64px; --container: 1240px; --reading: 680px;

  /* ── Shadow: ledger elevation, never glow-heavy ───────────────── */
  --shadow-1:    0 1px 2px rgba(24,32,26,0.08);
  --shadow-2:    0 18px 44px rgba(24,32,26,0.12);
  --shadow-soft: 0 10px 28px rgba(24,32,26,0.10);
  --shadow-glow: 0 0 0 1px var(--accent-glow), 0 14px 34px rgba(var(--accent-rgb),0.10);

  /* ── Z ─────────────────────────────────────────────────────────── */
  --z-nav: 80; --z-modal: 100; --z-toast: 120;
}

/* ── Accent options — one active accent per session ───────────────── */
[data-accent="green"] {
  --accent: #1F8A5B; --accent-2: #176A45; --accent-rgb: 31,138,91; --accent-on: #FBFEFA; --live: #21A664;
}
[data-accent="yellow"] {
  --accent: #A97824; --accent-2: #825915; --accent-rgb: 169,120,36; --accent-on: #FCFCF8; --live: #A97824;
}
[data-accent="blue"] {
  --accent: #247C84; --accent-2: #175C62; --accent-rgb: 36,124,132; --accent-on: #FBFEFA; --live: #247C84;
}

/* ════════════════════════════════════════════════════════════════════
   NIGHT — civic dark mode. [data-theme="night"]
   ════════════════════════════════════════════════════════════════════ */
[data-theme="night"] {
  --bg-0: #0B100D; --bg-1: #101612; --bg-2: #161D18; --bg-3: #1D261F; --bg-4: #263129;
  --line: rgba(255,255,255,0.05); --line-2: rgba(255,255,255,0.10);
  --ink: #ECEAE6; --ink-2: rgba(236,234,230,0.62); --ink-3: rgba(236,234,230,0.38); --ink-4: rgba(236,234,230,0.20);
  --accent: #41D17B; --accent-2: #2FA964; --accent-rgb: 65,209,123; --accent-on: #0B100D; --live: #41D17B;
  --gold: #E5B85C; --gold-rgb: 229,184,92; --critical: #FF5C5C;

  --landscape:
     radial-gradient(760px 420px at 10% 0%, rgba(var(--accent-rgb),0.12), transparent 64%),
     linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
     linear-gradient(180deg, rgba(255,255,255,0.028) 1px, transparent 1px),
     linear-gradient(180deg, #111713 0%, #0B100D 100%);
  --glass-bg: rgba(22,29,24,0.82); --glass-bg-2: rgba(22,29,24,0.62);
  --glass-tint: rgba(var(--accent-rgb),0.08);
  --glass-border: rgba(255,255,255,0.08);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 14px 50px rgba(0,0,0,0.38); --shadow-soft: 0 8px 34px rgba(0,0,0,0.30);
}
[data-theme="night"][data-accent="yellow"] { --accent:#D5FF5A; --accent-2:#B8E03D; --accent-rgb:213,255,90; --accent-on:#0a0a0a; --live:#D5FF5A; }
[data-theme="night"][data-accent="blue"]   { --accent:#007AFF; --accent-2:#0062CC; --accent-rgb:0,122,255; --accent-on:#ffffff; --live:#5AC8FA; }

body { font-synthesis-weight: none; font-synthesis-style: none; font-synthesis: none; }