/* ════════════════════════════════════════════════════════════════════════════
   ZDIV2 — DESIGN TOKENS  ·  the single source of truth for the whole product
   ────────────────────────────────────────────────────────────────────────────
   Governed by the Gold Standard: docs/scope/FORM_GOLD_STANDARD.md
   (§ "Design tokens — the enforced source"). EVERY surface — sidebar, hub, every
   V9 form (the geo- and gf- Kit), the ZED rail — pulls its color / type / spacing /
   elevation from THESE variables so it all flows (one font, one palette, one
   scale). Build new pages against var(--zd-*); never hardcode a hex.

   Loaded FIRST in App.razor (before app.css / chrome.css / v9-geometry.css) so
   every downstream sheet can reference it. Change a brand value HERE, once.

   Aesthetic: clean, light, Fortune-500 (Meta Business Suite / Stripe / Linear) —
   white panels on a soft grey canvas, hairline borders, ONE blue accent, soft
   off-ink text (no pure-black/pure-white halation), real but restrained depth.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Surfaces ──────────────────────────────────────────────────────────── */
    --zd-canvas:        #E4ECF5;   /* app background — deepened so cards separate (was #EEF3F8; token pass 2026-06-30) */
    --zd-panel:         #FFFFFF;   /* cards · sidebar · rails · form zones */
    --zd-panel-tint:    #F4F8FD;   /* subtle inset (metric sub-cards, hover) · cards sit slightly off-white */
    --zd-hairline:      #CBD9EE;   /* lighter tier — dividers / hero / separators (was #E3E9F1; token pass 2026-06-30) */
    --zd-hairline-2:    #AFC2DD;   /* strong tier — card / grid border (was #CBD9EE; token pass 2026-06-30) */

    /* ── Ink (text) — soft off-ink, pure white reserved for emphasis on color ─ */
    --zd-ink:           #1C2B3A;   /* primary text */
    --zd-ink-2:         #2A3B55;   /* secondary · nav items */
    --zd-muted:         #5A6E8C;   /* labels · captions · sub-text */
    --zd-muted-2:       #8A99AD;   /* tertiary · uppercase eyebrows */

    /* ── Accent — ONE blue, everywhere (links, active, primary action, ZED) ── */
    --zd-accent:        #1565BE;
    --zd-accent-strong: #0F4C95;   /* hover / pressed */
    --zd-accent-soft:   rgba(21,101,190,0.10);   /* pills · tints · active bg */
    --zd-accent-line:   rgba(21,101,190,0.28);    /* accent border */

    /* ── V9 FORM DNA — the legacy fingerprint, reconciled to the light system ─ */
    --zd-bluebar:       #1B3A6B;   /* the filled blue-bar field LABEL (V9 signature) */
    --zd-bluebar-ink:   #FFFFFF;   /* blue-bar text */
    --zd-value-bg:      #FFFFFF;   /* editable value box */
    --zd-readonly-bg:   #F4F8FE;   /* read-only value (V9 TDBText) */
    --zd-grid-head:     #EDF3FB;   /* grid column-header strip */
    --zd-caption-bg:    #FFFFFF;   /* form/page HEADER band — was navy #071426 */
    --zd-caption-ink:   #1C2B3A;   /* form/page header text */

    /* ── Status — muted, corporate (not Tailwind defaults) ──────────────────── */
    --zd-ok:    #557A68;   --zd-ok-soft:   #EAF0EC;   /* quietest grey-toned (was #1F7A4D / #E6F0E2; token pass 2026-06-30) */
    --zd-warn:  #7E6A48;   --zd-warn-soft: #F1EEE6;   /* (was #B45309 / #FBEFD9) */
    --zd-bad:   #8A5F57;   --zd-bad-soft:  #EFE9E7;   /* (was #B0341D / #FBEDEA) */

    /* ── Typography — ONE family across the whole system (rule #5: "it all flows") */
    --zd-font:      'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --zd-font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* ── Elevation — restrained depth (dimensional, not flat; not heavy) ─────── */
    --zd-shadow-1: 0 3px 8px rgba(16,33,60,0.14), 0 1px 2px rgba(16,33,60,0.08);   /* resting card — stronger lift (token pass 2026-06-30) */
    --zd-shadow-2: 0 8px 20px rgba(16,33,60,0.14);  /* hover / lifted */
    --zd-shadow-3: 0 6px 24px rgba(16,33,60,0.08);  /* panel / shell */

    /* ── Radius ─────────────────────────────────────────────────────────────── */
    --zd-radius:    10px;
    --zd-radius-sm: 7px;
    --zd-radius-lg: 12px;
}