/**
 * Elisys Design System v1.9 · "Obsidian"
 * @elisys/design-tokens — canonical CSS custom properties
 * Themes: dark (default, [data-theme="light"] remaps) · Accents via [data-accent] (6: copper/brass/terracotta/steel/emerald/amethyst)
 * Surfaces: warroom · presentation · agent · pen · candidate · admin · portal · superadmin
 * v1.2: accent-700 step · shadcn/ui contract [data-ui="shadcn"] · dataviz palette
 * v1.3: emerald + amethyst accents (collision-guarded vs verified green / AI violet)
 * v1.4.2: type families → Inter / Fira Sans / Noto Sans Mono (full ha·ig·yo·pcm coverage,
 *   self-hosted in fonts.css — NEVER fonts.googleapis.com; CDN subsets drop U+0300/0301/0323).
 *   Candidate surface remapped public → ui voice (executive intelligence, ratified v1.4.2).
 * v1.9: BORDERLESS LIQUID GLASS (ratified from WarRoom Situation Board): cards drop
 *   perimeter borders — depth from gradient fill + blur 24 + soft shadow + inset top
 *   highlight. --radius-card 10px replaces 16px for glass cards. Light "Paper" glass =
 *   white gradient + ink shadow. Interaction states (hover lift · press .985 · focus ring)
 *   are a UX requirement — tokens/interactions.css (.el-glass / .el-interactive / .el-title).
 *   Accent ring remains reserved for live/critical (glass-accent) + focus. Hairline
 *   dividers INSIDE components stay; card perimeters are borderless.
 * Source of truth: Elisys Design System.dc.html + packages/contracts closed sets
 */

:root {
  /* ── Color · navy surface scale ─────────────────────────── */
  --navy-950: #070D1A;   /* app background */
  --navy-900: #0A1628;   /* canvas */
  --navy-800: #0F1E36;   /* raised */
  --navy-750: #142845;   /* glow base */
  --navy-700: #1A2D4D;   /* lines */
  --navy-600: #2A4068;   /* muted UI */

  /* ── Color · accent (copper default; see [data-accent]) ──── */
  --accent-400: #D4A574;
  --accent-500: #B87333;
  --accent-600: #9A5F26;
  --accent-700: #7A4A21;   /* light-theme solid-fill step — white text ≥6.1:1 on all accents */
  --accent-hover: #C98443;
  --accent-tint: #E4BC8C;
  --accent-rgb: 184,115,51; /* @kind other */
  --accent-bright-rgb: 212,165,116; /* @kind other */
  --accent: var(--accent-500);
  --accent-bright: var(--accent-400);
  --accent-deep: var(--accent-600);

  /* ── Color · neutrals ───────────────────────────────────── */
  --paper: #FAFAF7;
  --ivory: #F5F1E8;
  --slate-300: #C9CFDA;   /* body text on dark */
  --slate-400: #8A94A6;   /* secondary text on dark */
  --slate-600: #57616F;   /* tertiary on dark / secondary on light */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-900: #111827;

  /* ── Color · semantic (never themed by tenant accent) ───── */
  --verified: #16A34A;         --verified-on-dark: #4ADE80;  --verified-on-light: #15803D;
  --pending: #F59E0B;          --pending-on-dark: #FBBF24;   --pending-on-light: #92600A;
  --warning: #F97316;          --warning-on-dark: #FB923C;   --warning-on-light: #9A3412;
  --danger: #C8102E;           --danger-on-dark: #F87171;    --danger-on-light: #C8102E;
  --info: #3B82F6;             --info-on-dark: #60A5FA;      --info-on-light: #1D4ED8;
  --ai: #7C3AED;               --ai-on-dark: #A78BFA;        --ai-on-light: #6D28D9;
  --locked: #0F766E;           --locked-on-dark: #2DD4BF;    --locked-on-light: #115E59;

  /* ── Status → tone aliases (closed sets from @elisys/contracts) ──
     Evidence processing: received=info · verifying=ai · verified=verified
       rejected=danger · held=pending · archived=neutral
     Routing: auto-accept=verified · route-to-review=pending · hold-from-display=danger
     Review queue: pending=pending · in-review=info · completed=verified · escalated=danger
     Incident severity: LOW=neutral · MEDIUM=pending · HIGH=warning · CRITICAL=danger
     Breach: DETECTED=danger(+72h countdown) · UNDER_INVESTIGATION=pending · RESOLVED=verified
     Device tier: secure-enclave/strongbox=verified · tee=info · software=pending(dashed) */

  /* ── Glass recipes (dark) — v1.9 borderless liquid glass ──
     Cards have NO perimeter border: depth = gradient fill + blur 24 + shadow
     + inset ivory top highlight. Tiers differ by shadow, not border.
     glass-accent (live/critical) is the ONE sanctioned ring. */
  --glass-card-bg: linear-gradient(150deg, rgba(7,13,26,0.28), rgba(7,13,26,0.16) 60%);
  --glass-card-shadow: 0 18px 44px rgba(0,0,0,0.26), inset 0 1px 0 rgba(245,241,232,0.05);
  --glass-card-bg-light: linear-gradient(150deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55) 60%);
  --glass-card-shadow-light: 0 16px 40px rgba(26,35,51,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
  --glass-card-blur: 24px; /* @kind other */
  --glass-1-bg: var(--glass-card-bg);          /* card */
  --glass-1-border: transparent;
  --glass-1-blur: 24px; /* @kind other */
  --glass-2-bg: var(--glass-card-bg);          /* raised — + elev-2 shadow */
  --glass-2-border: transparent;
  --glass-2-blur: 24px; /* @kind other */
  --glass-3-bg: rgba(15,30,54,0.92);           /* modal — near-solid over unknown content */
  --glass-3-border: transparent;
  --glass-3-blur: 24px; /* @kind other */
  --glass-accent-bg: rgba(var(--accent-rgb),0.07);
  --glass-accent-border: rgba(var(--accent-rgb),0.40);
  --glass-scrim-bg: rgba(7,13,26,0.75);
  --glass-scrim-blur: 20px; /* @kind other */

  /* ── Elevation ──────────────────────────────────────────── */
  --elev-2-shadow: 0 8px 24px rgba(0,0,0,0.35);
  --elev-3-shadow: 0 20px 56px rgba(0,0,0,0.50);
  --glow-accent: 0 0 24px rgba(var(--accent-rgb),0.25);
  --glow-accent-strong: 0 0 24px rgba(var(--accent-rgb),0.45);

  /* ── Typography ─────────────────────────────────────────── */
  --font-ui: 'Inter', system-ui, sans-serif;              /* operational voice */
  --font-public: 'Fira Sans', system-ui, sans-serif;      /* public voice — PEN, Portal */
  --font-data: 'Noto Sans Mono', ui-monospace, monospace; /* everything the system asserts */

  --type-display: 600 44px/1.1 var(--font-ui);   /* ls -0.03em */
  --type-title: 600 28px/1.2 var(--font-ui);     /* ls -0.02em */
  --type-heading: 600 20px/1.3 var(--font-ui);   /* ls -0.015em */
  --type-subhead: 500 15px/1.4 var(--font-ui);
  --type-body: 400 13.5px/1.55 var(--font-ui);
  --type-caption: 400 11.5px/1.4 var(--font-ui);
  --type-data-lg: 500 40px/1.1 var(--font-data); /* tabular-nums */
  --type-data-md: 400 20px/1.2 var(--font-data);
  --type-data-sm: 400 12px/1.4 var(--font-data);

  /* ── Spacing · 4px base ─────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --hit-target-min: 44px; /* @kind other */   /* agent: 56px · pen/candidate: 48px */

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-xs: 6px;     /* small controls */
  --radius-sm: 8px;     /* inputs, tags */
  --radius-card: 10px;  /* glass cards (v1.9 — roundness never obvious) */
  --radius-md: 12px;    /* inner panels */
  --radius-lg: 16px;    /* drawers · large sheets (pre-v1.9 cards) */
  --radius-xl: 22px;    /* page shells */
  --radius-sheet: 24px; /* mobile bottom sheets */
  --radius-pill: 999px; /* all interactive */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-data: ease-out; /* @kind other */

  /* ── Feedback & interruption (design system §04C) ────────
     Escalation ladder: inline → toast → banner → modal. */
  --z-dropdown: 1000; /* @kind other */
  --z-sticky: 1100; /* @kind other */
  --z-scrim: 1200; /* @kind other */
  --z-modal: 1300; /* @kind other */
  --z-toast: 1400; /* @kind other */
  --z-critical: 1500; /* @kind other */   /* distress / break-through */
  --scrim-dark: rgba(7,13,26,0.75);
  --scrim-light: rgba(10,22,40,0.45);
  --modal-radius: 18px;
  --modal-max-w-dialog: 480px; /* @kind other */
  --modal-max-w-form: 640px; /* @kind other */
  --toast-bg-dark: #0F1E36;         /* solid navy-800 — never glass over unknown content */
  --toast-bg-light: #FFFFFF;
  --toast-radius: 14px;
  --toast-duration-success: 5000ms; /* @kind other */ /* errors persist until acted on */
  --toast-max-visible: 3; /* @kind other */           /* older collapse into a count */
  --banner-radius: 12px;
  --skeleton-shimmer: 1600ms; /* @kind other */
  /* Banner tone recipes (dark): bg rgba(tone,0.08–0.09), border 1px rgba(tone,0.30–0.40),
     title in the tone's on-dark step. Critical: bg 0.13, border 1.5px 0.55,
     glow 0 0 24px rgba(200,16,46,0.15), pulse-attention ×3.
     Light theme: same alphas on paper, text in on-light steps. */
}

/* ── Accent themes (one per tenant deployment) ────────────── */
[data-accent="brass"] {
  --accent-400: #D9BC6B; --accent-500: #B8912F; --accent-600: #96741F; --accent-700: #7A5D16;
  --accent-hover: #C9A344; --accent-tint: #E6CE8E;
  --accent-rgb: 184,145,47; /* @kind other */ --accent-bright-rgb: 217,188,107; /* @kind other */
}
[data-accent="terracotta"] {
  --accent-400: #DE9077; --accent-500: #C05B3C; --accent-600: #9C4527; --accent-700: #7E3720;
  --accent-hover: #CD6F50; --accent-tint: #EAAE9B;
  --accent-rgb: 192,91,60; /* @kind other */ --accent-bright-rgb: 222,144,119; /* @kind other */
}
[data-accent="steel"] {
  --accent-400: #8FA9CE; --accent-500: #5B7BAE; --accent-600: #43608F; --accent-700: #35507A;
  --accent-hover: #6E8CBB; --accent-tint: #AFC3DE;
  --accent-rgb: 91,123,174; /* @kind other */ --accent-bright-rgb: 143,169,206; /* @kind other */
}
/* v1.3 accents. Emerald = Nigeria's civic green tuned to Obsidian (hue 160,
   deliberately off verified green hue 140 — an emerald button never impersonates
   a Verified badge). Amethyst = judicial/tribunal register, muted below AI violet. */
[data-accent="emerald"] {
  --accent-400: #52BD92; --accent-500: #0E8A58; --accent-600: #0A6B45; --accent-700: #07523A;
  --accent-hover: #17A26C; --accent-tint: #8AD4B4;
  --accent-rgb: 14,138,88; /* @kind other */ --accent-bright-rgb: 82,189,146; /* @kind other */
}
[data-accent="amethyst"] {
  --accent-400: #BE93E4; --accent-500: #9660C9; --accent-600: #7A46A8; --accent-700: #5E3384;
  --accent-hover: #A672D4; --accent-tint: #D7BCEF;
  --accent-rgb: 150,96,201; /* @kind other */ --accent-bright-rgb: 190,147,228; /* @kind other */
}

/* ── Light "Paper" theme (Admin Console · Public Portal) ──── */
[data-theme="light"] {
  --surface-bg: #F5F3EC;
  --surface-card: #FAFAF7;
  --surface-inner: #FFFFFF;
  --surface-line: #E3E0D6;
  --surface-line-soft: #F0EDE2;
  --text-primary: #0A1628;
  --text-secondary: #57616F;
  --text-tertiary: #6B7280;
  --card-shadow: 0 1px 3px rgba(10,22,40,0.07), 0 10px 32px rgba(10,22,40,0.06);
  --accent-body: var(--accent-600); /* copper on paper uses the deep step */
}
[data-theme="dark"], :root {
  --surface-bg: var(--navy-950);
  --surface-card: var(--glass-1-bg);
  --surface-inner: var(--navy-800);
  --surface-line: rgba(245,241,232,0.07);
  --surface-line-soft: rgba(245,241,232,0.05);
  --text-primary: var(--ivory);
  --text-secondary: var(--slate-400);
  --text-tertiary: var(--slate-600);
  --accent-body: var(--accent-400);
}

/* ── Per-surface base config ──────────────────────────────── */
[data-surface="warroom"]      { font-family: var(--font-ui); font-size: 13px; }
[data-surface="presentation"] { font-family: var(--font-ui); font-size: 24px; }
[data-surface="agent"]        { font-family: var(--font-ui); font-size: 15px; --hit-target-min: 56px; /* @kind other */ }
[data-surface="pen"]          { font-family: var(--font-public); font-size: 15px; --hit-target-min: 48px; /* @kind other */ }
[data-surface="candidate"]    { font-family: var(--font-ui); font-size: 15px; --hit-target-min: 48px; /* @kind other */ } /* v1.4.2: public → ui voice */
[data-surface="admin"]        { font-family: var(--font-ui); font-size: 13.5px; }
[data-surface="portal"]       { font-family: var(--font-public); font-size: 16px; }
[data-surface="superadmin"]   { font-family: var(--font-ui); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════
   v1.2 additions — shadcn/ui variable contract · data-viz palette
   ═══════════════════════════════════════════════════════════ */

/* ── shadcn/ui CSS-variable contract ──────────────────────────
   Scope: set data-ui="shadcn" on the app root of shadcn-built apps.
   Deliberately scoped, NOT :root — shadcn's --accent (subtle hover wash)
   would otherwise clobber the Elisys --accent alias (tenant copper).
   Inside the scope, reach the tenant accent via the numbered steps
   (--accent-400/-500/-600/-700), which [data-accent] still remaps.
   Surface casting (dark): --card = navy-800 (flattened glass-1),
   --popover = navy-750 (as glass-2 sits above glass-1). Glass recipes
   remain the preferred treatment in bespoke components.
   Contrast (AA worst cases): dark slate-400 on navy-800 muted 5.4:1,
   navy-950 on accent-400 primary ≥7.7:1, #FFF on danger 5.9:1;
   light slate-600 on #F0EDE2 5.4:1, #FFF on accent-700 ≥6.1:1. */
[data-ui="shadcn"] {
  --background: var(--navy-950);
  --foreground: var(--ivory);
  --card: var(--navy-800);
  --card-foreground: var(--ivory);
  --popover: var(--navy-750);
  --popover-foreground: var(--ivory);
  --primary: var(--accent-400);
  --primary-foreground: var(--navy-950);
  --secondary: var(--navy-700);
  --secondary-foreground: var(--slate-300);
  --muted: var(--navy-800);
  --muted-foreground: var(--slate-400);
  --accent: var(--navy-750);            /* hover wash — NOT tenant accent */
  --accent-foreground: var(--ivory);
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --border: rgba(245,241,232,0.12);
  --input: rgba(245,241,232,0.16);
  --ring: var(--accent-400);
  --radius: 12px;   /* lg=12 inner panels · md=10 · sm=8 inputs; glass cards keep --radius-lg 16 outside stock primitives */
  /* shadcn/recharts chart slots → first five series */
  --chart-1: var(--dataviz-series-1);
  --chart-2: var(--dataviz-series-2);
  --chart-3: var(--dataviz-series-3);
  --chart-4: var(--dataviz-series-4);
  --chart-5: var(--dataviz-series-5);
}
[data-theme="light"] [data-ui="shadcn"],
[data-ui="shadcn"][data-theme="light"] {
  --background: #F5F3EC;
  --foreground: #0A1628;
  --card: #FAFAF7;
  --card-foreground: #0A1628;
  --popover: #FFFFFF;
  --popover-foreground: #0A1628;
  --primary: var(--accent-700);
  --primary-foreground: #FFFFFF;
  --secondary: #F0EDE2;
  --secondary-foreground: #0A1628;
  --muted: #F0EDE2;
  --muted-foreground: #57616F;
  --accent: #EDE9DC;                    /* hover wash on paper */
  --accent-foreground: #0A1628;
  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;
  --border: #E3E0D6;
  --input: #D6D2C4;
  --ring: var(--accent-600);
}

/* ── Data-viz palette (election-night charts) ─────────────────
   Categorical series: 6 hue families × 2 lightness tiers = 12.
   Families (cyan · indigo · magenta · chartreuse · orchid · sage) sit in
   the gaps between the seven semantic status anchors — a party's line can
   never be mistaken for verified/pending/warning/danger/info/ai/locked —
   and none reuse a tenant accent hue. Adjacent series alternate hue family
   AND lightness tier (colorblind luminance signal). Bright tier (1–6)
   first — the room-scale presentation set. Beyond 6 concurrent series,
   add dash patterns or point markers and direct-label lines. Tenant accent
   is reserved for the watchlist-highlight ring/halo — never a series fill. */
:root {
  --dataviz-series-1:  #4FC3DC;  /* cyan · bright */
  --dataviz-series-2:  #97A4F2;  /* indigo · bright */
  --dataviz-series-3:  #E67FC9;  /* magenta · bright */
  --dataviz-series-4:  #C5D157;  /* chartreuse · bright */
  --dataviz-series-5:  #C293E8;  /* orchid · bright */
  --dataviz-series-6:  #7FCCA3;  /* sage · bright */
  --dataviz-series-7:  #1D7E95;  /* cyan · deep */
  --dataviz-series-8:  #5462CE;  /* indigo · deep */
  --dataviz-series-9:  #A63E8C;  /* magenta · deep */
  --dataviz-series-10: #7F8A2A;  /* chartreuse · deep */
  --dataviz-series-11: #8A57BD;  /* orchid · deep */
  --dataviz-series-12: #3B8262;  /* sage · deep */

  /* Sequential — coverage-density maps (low → high) */
  --dataviz-seq-1: #122A44;
  --dataviz-seq-2: #17466B;
  --dataviz-seq-3: #1D628C;
  --dataviz-seq-4: #2B80A9;
  --dataviz-seq-5: #479DC2;
  --dataviz-seq-6: #74BCD9;
  --dataviz-seq-7: #A5DAEC;

  /* Diverging — official-vs-observed variance
     (magenta = observed BELOW official · cyan = ABOVE · neutral mid;
     deliberately not amber/red — variance is a measurement, not an alarm) */
  --dataviz-div-n3: #E67FC9;
  --dataviz-div-n2: #BC62A6;
  --dataviz-div-n1: #8C4E82;
  --dataviz-div-0:  #4E5870;
  --dataviz-div-p1: #2F6B84;
  --dataviz-div-p2: #3798B3;
  --dataviz-div-p3: #4FC3DC;
}
[data-theme="light"] {
  --dataviz-series-1:  #0C7A91;
  --dataviz-series-2:  #3D4EC2;
  --dataviz-series-3:  #AE2E8C;
  --dataviz-series-4:  #6F7A16;
  --dataviz-series-5:  #7C3DA6;
  --dataviz-series-6:  #23784F;
  --dataviz-series-7:  #075063;
  --dataviz-series-8:  #232E86;
  --dataviz-series-9:  #791E60;
  --dataviz-series-10: #495210;
  --dataviz-series-11: #52246C;
  --dataviz-series-12: #0F4C30;

  --dataviz-seq-1: #E7F1F4;
  --dataviz-seq-2: #C2DDE7;
  --dataviz-seq-3: #93C3D4;
  --dataviz-seq-4: #609FB8;
  --dataviz-seq-5: #3A7E9B;
  --dataviz-seq-6: #1F5F7B;
  --dataviz-seq-7: #0E425A;

  --dataviz-div-n3: #8C2470;
  --dataviz-div-n2: #B4539A;
  --dataviz-div-n1: #D49CC2;
  --dataviz-div-0:  #E7E4DA;
  --dataviz-div-p1: #8FC0CD;
  --dataviz-div-p2: #4392A6;
  --dataviz-div-p3: #0C6B82;
}