/* Mungo Ledger — Webfonts
   The triad: Source Serif 4 (voice), Inter (work), JetBrains Mono (proof).
   All free, OFL, served from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* Mungo Ledger — Color scales
   Ramps run 0 (lightest) → 950 (darkest). Use these exact stops.
   Base is warm (the record); the software layer is cool (Signal/violet).
   Color = meaning, but the PRODUCT UI is allowed to feel alive:
   Signal drives action, oxblood stays reserved for enforcement verdicts. */

:root {
  /* ---- Brand anchors ---- */
  --paper:  #F7F5F0;  /* Ledger canvas — lifted for brighter product surfaces */
  --ink:    #191714;  /* Console canvas, text on paper */
  --oxblood:#7A2E2E;  /* enforcement verdict — the stamp (NOT a UI accent) */
  --seal:   #2E4B3F;  /* verification */
  --stone:  #8A857A;  /* neutral muted */
  --brass:  #C9A24B;  /* attention (flagged) — semantic only */
  --signal: #2E62B8;  /* PRIMARY ACTION — interactive, technical, trustworthy */

  /* ---- Warm neutral (paper → ink) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFBF8;
  --neutral-50:  #F7F5F0;
  --neutral-100: #EEEBE3;
  --neutral-200: #DCD7CB;
  --neutral-300: #B5AFA2;
  --neutral-400: #8A857A;
  --neutral-500: #6E6A60;
  --neutral-600: #55524A;
  --neutral-700: #3E3B35;
  --neutral-800: #2B2925;
  --neutral-900: #211E1A;
  --neutral-950: #191714;

  /* ---- Slate (cool product-chrome neutral) ----
     The SaaS note. For dense product chrome — app sidebars, toolbars,
     table headers, data panels — where warm paper reads too editorial.
     Never for long-form/marketing prose; the warm ramp still owns those. */
  --slate-25:  #F8FAFC;
  --slate-50:  #F1F4F9;
  --slate-100: #E5EAF2;
  --slate-200: #D2D9E5;
  --slate-300: #AEB9CB;
  --slate-400: #8493A9;
  --slate-500: #61708A;
  --slate-600: #47566E;
  --slate-700: #354154;
  --slate-800: #232C3B;
  --slate-900: #161C27;

  /* ---- Oxblood (enforcement / verdict) ---- */
  --oxblood-50:  #FAEDEB;
  --oxblood-100: #F2D4D0;
  --oxblood-200: #E4B0AA;
  --oxblood-300: #D08880;
  --oxblood-400: #B95F57;
  --oxblood-500: #9A4440;
  --oxblood-600: #7A2E2E;
  --oxblood-700: #632424;
  --oxblood-800: #4C1B1B;
  --oxblood-900: #341212;
  --oxblood-console: #C96A5E;  /* oxblood as text/number on Ink */

  /* ---- Seal green (verification) ---- */
  --seal-50:  #ECF3EF;
  --seal-100: #D3E3DA;
  --seal-200: #AECABA;
  --seal-300: #86AC96;
  --seal-400: #5F8A6E;
  --seal-500: #446B54;
  --seal-600: #2E4B3F;
  --seal-700: #253D33;
  --seal-800: #1C2F27;
  --seal-900: #131F1A;
  --seal-console: #7FA98C;  /* seal as text on Ink */
  --seal-console-badge: #9FC4AB;  /* seal text on badge fills (dark) */

  /* ---- Brass (attention — semantic only) ---- */
  --brass-50:  #F7EED9;
  --brass-200: #E8D3A2;
  --brass-400: #C9A24B;
  --brass-600: #8C6D1F;
  --brass-800: #6B5320;
  --brass-console: #E8CF8F;  /* brass as text on Ink */

  /* ---- Live / healthy (reliability signal) ----
     Fresher than seal green. Seal = a verdict was rendered (verification);
     Live = the system itself is healthy right now (uptime, connected,
     streaming, sync OK). This is the "reliable and fast" cue. */
  --live-50:  #E6F7F0;
  --live-100: #C4EDDD;
  --live-200: #8FDCBF;
  --live-300: #52C79E;
  --live-400: #21AE80;  /* live anchor — dots, uptime, connected */
  --live-500: #158C68;
  --live-600: #0F7053;
  --live-700: #0C5741;
  --live-800: #093F30;
  --live-console: #45D3A3;  /* live text/dot on Ink */

  /* ---- Data-visualization palette ----
     Desaturated warm categoricals — read as neutral data, NOT status.
     Never reuse oxblood/seal/brass in charts unless literally showing
     blocked/verified/flagged counts. Max 5 series per chart. */
  --chart-1: #C96A5E;  /* Terracotta — primary series */
  --chart-2: #7FA98C;  /* Sage */
  --chart-3: #E8CF8F;  /* Sand */
  --chart-4: #8FA3B8;  /* Slate-blue — the only cool hue in the system, charts only */
  --chart-5: #B08BA5;  /* Mauve */
  --chart-grid: #3E3B35;  /* @kind color */ /* grid lines / axis text base */

  /* ---- Signal (dev-tool interactive accent) ----
     The hybrid hue. Cool azure = interactive / technical / system —
     coexists with oxblood (enforcement) without breaking color=meaning.
     Links in code, active nav, focus in the IDE surface, terminal cursor.
     Warm base still rules the page; Signal is the "software" note. */
  --signal-50:  #E8EFFB;
  --signal-100: #CBDDF6;
  --signal-200: #A3C2EE;
  --signal-300: #6E9EE4;
  --signal-400: #3E7DD6;
  --signal-500: #2E62B8;  /* interactive text on Paper (AA) */
  --signal-600: #244E95;
  --signal-700: #1D3E76;
  --signal-800: #172F59;
  --signal-900: #10203C;
  --signal-console: #6AA6FF;  /* interactive text/links on Ink */

  /* ---- Violet (agent reasoning / trace) ----
     The agentic hue. Marks autonomous model activity — reasoning steps,
     chain-of-thought, plan/act traces, "agent is working". Deliberately
     OUTSIDE the status set (oxblood/seal/brass) and distinct from Signal
     (human-interactive): violet = the machine thinking, never a verdict.
     Use sparingly — an agent-run panel, a trace stamp, a live pulse. */
  --violet-50:  #EFECFB;
  --violet-100: #DED8F6;
  --violet-200: #C3B9EF;
  --violet-300: #A594E9;
  --violet-400: #8B7CE8;  /* agent anchor — bright, for text/pulse on Ink */
  --violet-500: #6E5FCB;
  --violet-600: #574CA8;  /* agent text on Paper (AA) */
  --violet-700: #443B85;
  --violet-800: #332C63;
  --violet-900: #221D42;
  --violet-console: #A594E9;  /* agent text/trace on Ink */

  /* ---- Syntax highlighting (code blocks / terminal) ----
     Warm-tuned, low-neon. Tuned for the Ink terminal surface.
     A dev-tool signature that still reads as "warm document", not VS Code. */
  --code-bg:       #14120F;  /* @kind color */ /* terminal / code surface (one step darker than Ink) */
  --code-plain:    #E4DED2;  /* @kind color */ /* default code text */
  --code-comment:  #7E7869;  /* @kind color */ /* comments, muted */
  --code-keyword:  #C96A5E;  /* @kind color */ /* keywords / enforcement echo (oxblood-console) */
  --code-string:   #9FC4AB;  /* @kind color */ /* strings (seal echo) */
  --code-number:   #E8CF8F;  /* @kind color */ /* numbers / constants (brass echo) */
  --code-function: #6AA6FF;  /* @kind color */ /* functions / identifiers (signal) */
  --code-line:     #2A2622;  /* @kind color */ /* gutter / active-line rule */

  /* ---- Accent gradients (use SPARINGLY) ----
     The "intelligent system" note: Signal → violet, i.e. interactive →
     reasoning. Allowed on hero glows, agent panels, thin top-edge bands,
     progress/streaming fills. NEVER as a full-page background wash. */
  --gradient-intelligence: linear-gradient(135deg, #2E62B8 0%, #574CA8 55%, #8B7CE8 100%);  /* @kind other */
  --gradient-intelligence-console: linear-gradient(135deg, #6AA6FF 0%, #8B7CE8 100%);  /* @kind other */
  --gradient-edge: linear-gradient(90deg, #2E62B8 0%, #8B7CE8 50%, transparent 100%);  /* @kind other */
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F5F0 100%);  /* @kind other */
  --gradient-live: linear-gradient(90deg, #21AE80 0%, #52C79E 100%);  /* @kind other */
}
/* Mungo Ledger — Semantic role tokens
   Build against roles, not raw hex.
   :root = the Ledger (light). .console / html.dark = the Console (dark).

   KEY RULE: --action-* (Signal blue) drives every primary interaction —
   buttons, links, focus, active nav. --brand/oxblood is RESERVED for
   enforcement verdicts and editorial brand moments; using it as a generic
   UI accent is what made earlier work feel heavy and archival. */

:root {
  color-scheme: light;

  --bg-canvas:      #F7F5F0;
  --bg-surface:     #FFFFFF;   /* cards sit BRIGHT on warm canvas — SaaS contrast */
  --bg-surface-alt: #F1EFE8;
  --bg-raised:      #FFFFFF;   /* popovers, dropdowns, modals */
  --bg-chrome:      #F1F4F9;   /* app chrome: sidebars, toolbars (cool slate) */
  --bg-chrome-alt:  #E5EAF2;   /* table headers, chrome wells */
  --bg-hover:       #F1EFE8;   /* neutral row/item hover */
  --bg-selected:    #E8EFFB;   /* selected row/item (Signal tint) */

  --text-primary:   #191714;
  --text-secondary: #55524A;
  --text-muted:     #8A857A;
  --text-on-action: #FFFFFF;

  /* PRIMARY ACTION — Signal. Use for buttons, links, focus, active states. */
  --action:         #2E62B8;
  --action-hover:   #244E95;
  --action-active:  #1D3E76;
  --action-text:    #2E62B8;   /* action-colored text on paper (AA) */
  --action-tint:    #E8EFFB;
  --action-border:  #A3C2EE;
  --action-gradient: linear-gradient(180deg, #3E7DD6 0%, #2E62B8 100%);  /* @kind other */

  /* Brand — oxblood. Enforcement verdicts + editorial moments ONLY. */
  --brand:          #7A2E2E;
  --brand-hover:    #632424;
  --brand-text:     #632424;

  --verify:         #2E4B3F;
  --attention:      #8C6D1F;

  /* Live / healthy — reliability + uptime cues */
  --live:           #158C68;
  --live-dot:       #21AE80;
  --live-tint:      #E6F7F0;
  --live-border:    #8FDCBF;

  --border:         #DCD7CB;
  --border-subtle:  #EEEBE3;
  --border-strong:  #B5AFA2;
  --border-chrome:  #D2D9E5;   /* borders within cool chrome */
  --focus-ring:     #2E62B8;

  /* interactive / technical (dev-tool Signal) */
  --interactive:        #2E62B8;  /* links, actions, active nav in technical UI */
  --interactive-hover:  #244E95;
  --interactive-tint:   #E8EFFB;
  --interactive-border: #A3C2EE;

  /* agent reasoning / trace (agentic accent) */
  --agent:        #574CA8;  /* agent-trace text, run labels on paper (AA) */
  --agent-strong: #443B85;
  --agent-tint:   #EFECFB;
  --agent-border: #C3B9EF;

  /* code / terminal surface (dev-tool motif) */
  --surface-code:   #14120F;  /* code blocks read as "the terminal" even on the Ledger */
  --surface-code-text: #E4DED2;

  /* elevation — see tokens/elevation.css for the full scale */
  --shadow-glow:       none;
  --focus-ring-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(46, 98, 184, 0.55);

  /* semantic tints (light) */
  --danger-tint:   #FAEDEB;  --danger-border:  #E4B0AA;  --danger-text:  #632424;
  --verify-tint:   #ECF3EF;  --verify-border:  #AECABA;  --verify-text:  #2E4B3F;
  --flag-tint:     #F7EED9;  --flag-border:    #E8D3A2;  --flag-text:    #8C6D1F;

  /* stamp badge fills (light: solid fill + paper text) */
  --stamp-block-fill:  #7A2E2E;  --stamp-block-text:  #F4F1EA;
  --stamp-pass-fill:   #2E4B3F;  --stamp-pass-text:   #F4F1EA;
  --stamp-flag-fill:   #C9A24B;  --stamp-flag-text:   #191714;
}

.console,
html.dark {
  color-scheme: dark;

  --bg-canvas:      #191714;
  --bg-surface:     #211E1A;
  --bg-surface-alt: #2B2925;
  --bg-raised:      #262320;
  --bg-chrome:      #1C1A17;
  --bg-chrome-alt:  #232019;
  --bg-hover:       #2B2925;
  --bg-selected:    #172F59;

  --text-primary:   #F4F1EA;
  --text-secondary: #B5AFA2;
  --text-muted:     #8A857A;
  --text-on-action: #FFFFFF;

  /* PRIMARY ACTION — Signal (brightened for Ink) */
  --action:         #3E7DD6;
  --action-hover:   #6AA6FF;
  --action-active:  #A3C2EE;
  --action-text:    #6AA6FF;
  --action-tint:    #172F59;
  --action-border:  #244E95;
  --action-gradient: linear-gradient(180deg, #3E7DD6 0%, #2E62B8 100%);  /* @kind other */

  --brand:          #C96A5E;
  --brand-hover:    #D08880;
  --brand-text:     #C96A5E;

  --verify:         #7FA98C;
  --attention:      #E8CF8F;

  /* Live / healthy */
  --live:           #45D3A3;
  --live-dot:       #45D3A3;
  --live-tint:      #0C2A22;
  --live-border:    #0F7053;

  --border:         #322E28;
  --border-subtle:  #262320;
  --border-strong:  #3E3B35;
  --border-chrome:  #2A2622;
  --focus-ring:     #6AA6FF;

  /* interactive / technical (dev-tool Signal) */
  --interactive:        #6AA6FF;
  --interactive-hover:  #A3C2EE;
  --interactive-tint:   #172F59;
  --interactive-border: #244E95;

  /* agent reasoning / trace (agentic accent) */
  --agent:        #A594E9;  /* agent-trace text, run labels on Ink */
  --agent-strong: #C3B9EF;
  --agent-tint:   #2A2350;
  --agent-border: #443B85;

  /* code / terminal surface */
  --surface-code:   #14120F;
  --surface-code-text: #E4DED2;

  /* elevation — the Console earns a restrained glow (dev-tool signal).
     Cool, low-alpha, never neon: a focused panel/terminal edge-light only. */
  --shadow-glow:       0 0 0 1px #244E95, 0 0 24px -6px rgba(106,166,255,.35);
  --focus-ring-shadow: 0 0 0 2px #191714, 0 0 0 4px rgba(106,166,255,.65);

  /* semantic text (console) */
  --danger-tint:   #2A1B1A;  --danger-border:  #4C1B1B;  --danger-text:  #C96A5E;
  --verify-tint:   #1A241F;  --verify-border:  #1C2F27;  --verify-text:  #7FA98C;
  --flag-tint:     #2A2418;  --flag-border:    #6B5320;  --flag-text:    #E8CF8F;

  /* stamp badge fills (console) */
  --stamp-block-fill:  #7A2E2E;  --stamp-block-text:  #F4F1EA;
  --stamp-pass-fill:   #26382E;  --stamp-pass-text:   #9FC4AB;
  --stamp-flag-fill:   #6B5320;  --stamp-flag-text:   #E8CF8F;
}
/* Mungo Ledger — Typography
   serif speaks · sans works · mono proves.

   IMPORTANT: serif is for EDITORIAL and MARKETING voice (hero lines,
   report titles, quotes). PRODUCT UI — dashboards, tables, settings,
   modals — uses the SANS display scale below. Defaulting product
   screens to serif is what made earlier app work feel slow and archival.
   Source Serif never below 18px and never for UI controls.
   Mono never for prose; prose never for data. */

:root {
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Editorial scale — Source Serif (marketing, reports, quotes) */
  --text-display: 3.5rem;    --lh-display: 1.08;   /* @kind other */ /* Source Serif 600, -0.01em — hero */
  --text-h1:      2.5rem;    --lh-h1:      1.12;   /* @kind other */ /* Source Serif 600 — page title */
  --text-h2:      2rem;      --lh-h2:      1.18;   /* @kind other */ /* Source Serif 600 — section */
  --text-h3:      1.5rem;    --lh-h3:      1.25;   /* @kind other */ /* Source Serif 500 — subsection */
  --text-h4:      1.125rem;  --lh-h4:      1.35;   /* @kind other */ /* Inter 600 — card title */
  --text-body-lg: 1.125rem;  --lh-body-lg: 1.65;   /* @kind other */ /* Inter 400 — lead */
  --text-body:    1rem;      --lh-body:    1.65;   /* @kind other */ /* Inter 400 — default */
  --text-small:   0.875rem;  --lh-small:   1.5;    /* @kind other */ /* Inter 400/500 — captions, meta */
  --text-eyebrow: 0.6875rem; --lh-eyebrow: 1.4;    /* @kind other */ /* JetBrains Mono 500, 0.1em, UPPERCASE */
  --text-mono:    0.8125rem; --lh-mono:    1.7;    /* @kind other */ /* JetBrains Mono 400 — logs, IDs */

  /* PRODUCT UI scale — Inter, tight tracking. Use these on app screens:
     dashboards, tables, panels, settings, modals, empty states. */
  --text-ui-hero:  2.25rem;   --lh-ui-hero:  1.15;  /* @kind other */ /* Inter 700, -0.025em — app hero / big metric */
  --text-ui-title: 1.5rem;    --lh-ui-title: 1.25;  /* @kind other */ /* Inter 650, -0.02em — screen title */
  --text-ui-h2:    1.1875rem; --lh-ui-h2:    1.3;   /* @kind other */ /* Inter 600, -0.015em — panel heading */
  --text-ui-h3:    1rem;      --lh-ui-h3:    1.4;   /* @kind other */ /* Inter 600, -0.01em — card title */
  --text-ui-body:  0.9375rem; --lh-ui-body:  1.55;  /* @kind other */ /* Inter 400 — dense UI body (15px) */
  --text-ui-label: 0.8125rem; --lh-ui-label: 1.4;   /* @kind other */ /* Inter 500 — labels, table headers */
  --text-ui-meta:  0.75rem;   --lh-ui-meta:  1.4;   /* @kind other */ /* Inter 500 — meta, chips, counts */
  --text-metric:   2.75rem;   --lh-metric:   1.05;  /* @kind other */ /* Inter 700, -0.03em, tnum — KPI numbers */

  /* Weights */
  --fw-regular: 400;  /* @kind other */
  --fw-medium:  500;  /* @kind other */
  --fw-semibold:600;  /* @kind other */
  --fw-bold:    700;  /* @kind other */

  /* Tracking */
  --tracking-display: -0.01em;  /* @kind other */
  --tracking-ui-tight:-0.02em;  /* @kind other */ /* Inter titles / metrics */
  --tracking-eyebrow: 0.1em;    /* @kind other */
  --tracking-stamp:   0.06em;   /* @kind other */

  /* Numerics — always tabular for data, IDs, metrics, timestamps */
  --numeric-tabular: "tnum" 1, "lnum" 1;  /* @kind other */
}
/* Mungo Ledger — Spacing, radius, border, layout
   Softer than the original "documents have corners" doctrine: product UI
   gets friendly, modern radii while data tables and stamps stay crisp.
   Motion lives in tokens/motion.css; shadows in tokens/elevation.css. */

:root {
  /* Spacing scale (px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;   /* section rhythm (desktop); 64px mobile */

  /* Radius — friendlier. Controls and cards are softened; stamps and
     table cells stay tight so data still reads as a record. */
  --radius-control: 8px;   /* buttons, inputs, selects */
  --radius-card:    14px;  /* cards, panels */
  --radius-panel:   18px;  /* large surfaces, modals, hero panels */
  --radius-stamp:   6px;   /* badges / stamps */
  --radius-chip:    999px; /* chips, status pills, filter pills, avatars */
  --radius-pill:    999px; /* alias */
  --radius-sm:      6px;   /* tight inner elements, table cell affordances */

  /* Border */
  --border-width:      1px;
  --border-width-rule: 2px;  /* ink rules under table headers / totals */

  /* Shadow — legacy aliases; prefer tokens/elevation.css */
  --shadow-none: none;
  --shadow-popover: var(--elev-popover);

  /* Focus ring */
  --ring-width:  2px;
  --ring-offset: 2px;

  /* Layout */
  --container-max: 1200px;
  --measure:       720px;   /* long-form reports / docs */
  --gutter:        24px;
  --grid-gap:      24px;
}
/* Mungo Ledger — Elevation, depth, and glow
   The SaaS layer. Earlier versions were doctrinally flat ("flatness =
   confidence") which read as boring. Depth is now allowed and systematic:
   shadows are WARM-tinted (never neutral black) so they sit on paper,
   and they stay tight and low-alpha — crisp, not puffy.

   Rule of thumb: raised (buttons/inputs) = xs · cards = sm · sticky
   chrome = md · dropdowns/popovers = lg · modals = xl. */

:root {
  /* Warm-tinted elevation scale */
  --elev-0:  none;
  --elev-xs: 0 1px 2px rgba(25, 23, 20, 0.06);
  --elev-sm: 0 1px 2px rgba(25, 23, 20, 0.05), 0 2px 6px -1px rgba(25, 23, 20, 0.07);
  --elev-md: 0 2px 4px rgba(25, 23, 20, 0.05), 0 6px 14px -2px rgba(25, 23, 20, 0.09);
  --elev-lg: 0 4px 8px rgba(25, 23, 20, 0.05), 0 14px 32px -6px rgba(25, 23, 20, 0.13);
  --elev-xl: 0 8px 16px rgba(25, 23, 20, 0.06), 0 28px 60px -12px rgba(25, 23, 20, 0.20);

  /* Hairline + shadow combos — the crisp SaaS card look.
     A 1px border AND a soft shadow: definition plus lift. */
  --elev-card:       0 0 0 1px rgba(25, 23, 20, 0.06), 0 1px 2px rgba(25, 23, 20, 0.04), 0 4px 10px -2px rgba(25, 23, 20, 0.06);
  --elev-card-hover: 0 0 0 1px rgba(25, 23, 20, 0.09), 0 2px 4px rgba(25, 23, 20, 0.05), 0 10px 22px -4px rgba(25, 23, 20, 0.10);
  --elev-popover:    0 0 0 1px rgba(25, 23, 20, 0.07), 0 14px 32px -6px rgba(25, 23, 20, 0.15);
  --elev-modal:      0 0 0 1px rgba(25, 23, 20, 0.07), 0 28px 60px -12px rgba(25, 23, 20, 0.24);

  /* Inset — pressed controls, wells, track backgrounds */
  --elev-inset:      inset 0 1px 2px rgba(25, 23, 20, 0.08);
  --elev-inset-well: inset 0 1px 3px rgba(25, 23, 20, 0.06);

  /* Action button depth: subtle top highlight + grounded shadow.
     Gives primary buttons a tactile, clickable quality. */
  --elev-action:       inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(25, 23, 20, 0.10), 0 2px 6px -1px rgba(46, 98, 184, 0.24);
  --elev-action-hover: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(25, 23, 20, 0.10), 0 6px 16px -2px rgba(46, 98, 184, 0.32);

  /* Signal glow — "the system is thinking/working". Cool, low-alpha. */
  --glow-signal: 0 0 0 1px rgba(46, 98, 184, 0.35), 0 0 20px -4px rgba(46, 98, 184, 0.30);
  --glow-agent:  0 0 0 1px rgba(139, 124, 232, 0.35), 0 0 22px -4px rgba(139, 124, 232, 0.32);
  --glow-live:   0 0 0 3px rgba(33, 174, 128, 0.18);

  /* Focus rings — Signal, two-tone (white gap + ring) for any surface */
  --ring-signal: 0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(46, 98, 184, 0.55);
  --ring-danger: 0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(122, 46, 46, 0.50);
}

.console,
html.dark {
  /* On Ink, shadows barely read — depth comes from surface steps + edge
     light. Keep shadows for real overlays only. */
  --elev-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --elev-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --elev-md: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
  --elev-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
  --elev-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.65);

  --elev-card:       0 0 0 1px rgba(244, 241, 234, 0.07);
  --elev-card-hover: 0 0 0 1px rgba(244, 241, 234, 0.13), 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  --elev-popover:    0 0 0 1px rgba(244, 241, 234, 0.10), 0 14px 32px -6px rgba(0, 0, 0, 0.6);
  --elev-modal:      0 0 0 1px rgba(244, 241, 234, 0.10), 0 28px 60px -12px rgba(0, 0, 0, 0.7);

  --elev-inset:      inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-inset-well: inset 0 1px 3px rgba(0, 0, 0, 0.35);

  --elev-action:       inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px -2px rgba(106, 166, 255, 0.35);
  --elev-action-hover: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 16px -2px rgba(106, 166, 255, 0.50);

  --glow-signal: 0 0 0 1px rgba(106, 166, 255, 0.45), 0 0 24px -4px rgba(106, 166, 255, 0.40);
  --glow-agent:  0 0 0 1px rgba(165, 148, 233, 0.45), 0 0 26px -4px rgba(165, 148, 233, 0.42);
  --glow-live:   0 0 0 3px rgba(69, 211, 163, 0.22);

  --ring-signal: 0 0 0 2px var(--bg-canvas), 0 0 0 4px rgba(106, 166, 255, 0.65);
  --ring-danger: 0 0 0 2px var(--bg-canvas), 0 0 0 4px rgba(201, 106, 94, 0.60);
}
/* Mungo Ledger — Motion
   The "fast and intelligent" layer. Previously: "micro only, nothing
   bounces" — which read as inert. Now: interactions resolve FAST
   (90–160ms), transitions are confident, and there is exactly one
   springy easing reserved for state confirmation.

   Principle: speed communicates competence. Nothing decorative animates;
   everything that responds to input animates quickly. */

:root {
  /* Durations — bias fast. If in doubt, use --duration-fast. */
  --duration-instant: 90ms;   /* @kind other */ /* hover/press feedback, color shifts */
  --duration-fast:    140ms;  /* @kind other */ /* default UI transition */
  --duration-base:    200ms;  /* @kind other */ /* panels, disclosure, tab switch */
  --duration-slow:    320ms;  /* @kind other */ /* modal/drawer entrance */
  --duration-stream:  2600ms; /* @kind other */ /* streaming/progress sweeps */

  /* Easings */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */ /* default — decelerate */
  --ease-in-out:  cubic-bezier(0.45, 0.05, 0.55, 0.95); /* @kind other */ /* symmetrical moves */
  --ease-snap:    cubic-bezier(0.16, 1, 0.3, 1);        /* @kind other */ /* fast, crisp arrival — the house easing */
  --ease-spring:  cubic-bezier(0.34, 1.42, 0.64, 1);    /* @kind other */ /* ONE small overshoot: success/confirm only */

  /* Composed transitions — reach for these first */
  --transition-control: background var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), color var(--duration-instant) var(--ease-out);
  --transition-lift:    box-shadow var(--duration-fast) var(--ease-snap), transform var(--duration-fast) var(--ease-snap);
  --transition-panel:   opacity var(--duration-base) var(--ease-snap), transform var(--duration-base) var(--ease-snap);

  /* Interaction displacement — small, physical, never floaty */
  --lift-hover:  -1px;  /* @kind other */ /* cards/buttons rise 1px on hover */
  --press-scale: 0.985; /* @kind other */ /* controls compress on press */
}

/* Streaming / working indicators — the "intelligent system" motion motif.
   A sweep across a Signal-tinted track: use for agent runs, log tailing,
   and inference in flight. */
@keyframes mungo-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes mungo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(33, 174, 128, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(33, 174, 128, 0); }
}

@keyframes mungo-caret {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;  /* @kind other */
    --duration-fast: 1ms;     /* @kind other */
    --duration-base: 1ms;     /* @kind other */
    --duration-slow: 1ms;     /* @kind other */
    --lift-hover: 0px;        /* @kind other */
    --press-scale: 1;         /* @kind other */
  }
}