/**
 * Seesweet Design Tokens — Sovereign System
 *
 * Default (Sovereign dark / Obsidian): :root with no data-theme attribute.
 * Sovereign light (Alabaster Slate):   :root[data-theme="light"].
 *
 * Early script in injectNav syncs from localStorage (csuite-theme).
 */

:root {
  /* Shared non-color scale */
  --font:         'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs:      10px;
  --text-sm:      11px;
  --text-base:    13px;
  --text-md:      14px;
  --text-lg:      15px;
  --text-xl:      18px;
  --text-2xl:     24px;
  --text-3xl:     28px;

  --font-size-body:    var(--text-base);
  --font-size-small:   var(--text-sm);
  --font-size-caption: var(--text-xs);

  /* Long-form prose (chat stream, ticket/wiki markdown, onboarding quotes).
     Size and leading are tuned for extended reading on dashboard surfaces. */
  --font-size-prose:      15.5px;
  --leading-prose:        1.55;
  --font-size-prose-h1:   19px;
  --font-size-prose-h2:   17px;
  --font-size-prose-h3:   16px;
  --font-size-prose-h4:   15px;
  /* Bullets / checkbox glyphs aligned to prose line box */
  --font-size-prose-icon: 16px;

  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;

  /* Sharp radii — Sovereign rule: nothing > 4px except pills */
  --radius-sm:    2px;
  --radius:       2px;
  --radius-md:    4px;
  --radius-lg:    4px;
  --radius-xl:    4px;
  --radius-pill:  999px;

  --nav-h:        40px;

  /* Dashboard content column — single standard width across shells (.page-content,
   * admin/time/connections/spend/decisions, etc.). Use --page-max-width-wide for
   * explicit dense layouts (tables, kanban chrome) when needed. */
  --page-max-width:       1440px;
  --page-max-width-wide:  1600px;

  --ease:         0.15s cubic-bezier(0.2, 0, 0, 1);
  --ease-fast:    0.1s cubic-bezier(0.2, 0, 0, 1);

  color-scheme: dark;

  /* ── Sovereign Dark (Obsidian, default) ────────────────────────────────── */
  --bg:             #0A0C10;
  --bg-raised:      #13171E;
  --surface:        rgba(19, 23, 30, 0.88);
  --surface-1:      #13171E;
  --surface-2:      rgba(28, 32, 41, 0.92);
  --surface-3:      rgba(40, 46, 58, 0.72);
  --surface-hover:  rgba(0, 240, 255, 0.04);
  --overlay:        rgba(0, 0, 0, 0.65);
  --glass:          rgba(10, 12, 16, 0.92);
  --header-bg:      rgba(10, 12, 16, 0.94);

  --border:         rgba(255, 255, 255, 0.06);
  --border-strong:  rgba(255, 255, 255, 0.12);
  --border-dim:     rgba(255, 255, 255, 0.04);

  --text:           #F4F6FA;
  --text-2:         #C9D1E0;
  --text-3:         #6B7280;
  --text-muted:     #9CA3AF;
  /* Softer than --text on dark fields — long markdown/chat bodies (see chat.css). */
  --text-prose:     #e6edf3;

  /* Inline `code` chips inside prose markdown */
  --code-inline-bg:     rgba(255, 255, 255, 0.06);
  --code-inline-border: rgba(255, 255, 255, 0.08);

  /* Fenced code block background — intentionally darker than --bg to create depth */
  --code-block-bg:      #0d0d14;

  /* --accent is the primary interactive signal (cyan in dark, obsidian in light).
     --brand was a duplicate alias — removed. Use --accent everywhere. */
  --accent:         #00F0FF;
  --accent-dim:     rgba(0, 240, 255, 0.08);
  --accent-line:    rgba(0, 240, 255, 0.35);
  --on-accent:      #0A0C10;

  --link:           #F4F6FA;

  /* Functional colors — semantic status (badges, alerts, charts)
   *
   * Green vs Emerald split (intentional — do not merge):
   *   --emerald  live/connected/system-pulse states → --success alias, Connected
   *              badges, focus rings, wizard steps. Dark: neon terminal green.
   *   --green    human-reviewed positive outcomes → approved badges, verified
   *              claims, "good" KPI, toggle-on track.
   *
   * Amber was consolidated into yellow (no perceptible difference in practice).
   * Use --yellow / --warning for all caution-level indicators. */
  --green:          #22c55e;
  --green-dim:      rgba(34, 197, 94, 0.10);
  --emerald:        #00FF41;
  --emerald-dim:    rgba(0, 255, 65, 0.08);

  --red:            #f87171;
  --red-dim:        rgba(248, 113, 113, 0.10);

  --yellow:         #fbbf24;
  --yellow-dim:     rgba(251, 191, 36, 0.10);

  --blue:           #38bdf8;
  --blue-dim:       rgba(56, 189, 248, 0.10);
  --cyan:           #00F0FF;
  --cyan-dim:       rgba(0, 240, 255, 0.08);

  --purple:         #c4b5fd;
  --purple-dim:     rgba(196, 181, 253, 0.10);
  --indigo:         #818cf8;
  --indigo-dim:     rgba(129, 140, 248, 0.10);

  --orange:         #fb923c;
  --orange-dim:     rgba(251, 146, 60, 0.10);

  --pink:           #f9a8d4;
  --pink-dim:       rgba(249, 168, 212, 0.10);

  /* ── Agent signature hues (Phase 2A "soul") ───────────────────────────────
   * One identity hue per executive, surfaced as small accents (avatar ring,
   * conversation/agent-row rail, header wash). This is the single source of
   * truth for both chat and kanban and supersedes the diverging server.js
   * KNOWN_STYLES (light-tuned) and kanban ROLE_STYLES (dark-tuned) hexes.
   * Dark theme = brighter siblings of the light deep hues so they read on the
   * obsidian bg. Dim backgrounds are derived at the consumer via
   * color-mix(--agent-accent) so they track the active theme automatically. */
  --agent-cto:  #38bdf8;  --agent-cfo:  #34d399;  --agent-cmo:  #fbbf24;
  --agent-coo:  #a78bfa;  --agent-cpo:  #f472b6;  --agent-clo:  #fb7185;
  --agent-cro:  #2dd4bf;  --agent-cco:  #fb923c;  --agent-cio:  #22d3ee;
  --agent-cso:  #f87171;  --agent-cos:  #a3e635;  --agent-bco:  #c084fc;
  --agent-chro: #e879f9;  --agent-meta: #a5b4fc;  --agent-perm: #4ade80;
  --agent-vor:  #94a3b8;  --agent-main: #fb6f92;

  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:         0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 8px 28px rgba(0, 0, 0, 0.55);

  /* Glint — Apple-style "lit edge" treatment. A 1px highlight along the top
     (and a hint on the left) plus a soft drop on bottom/right. Compose with
     existing border so the rim catches ambient light at the top corners.
     Used on sidebars, headers, and ticket cards.
     - --glint-top: just the top highlight (use on full-bleed surfaces with
       only a bottom border, e.g. headers).
     - --glint-card: full top + bottom inset depth (use on rectangular cards
       and sidebars where all four edges are visible). */
  --glint-top:    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  --glint-card:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.30),
    inset -1px 0 0 0 rgba(0, 0, 0, 0.10);

  --nav-bg:         #0A0C10;
  --nav-border:     rgba(255, 255, 255, 0.08);
  --nav-brand:      #F4F6FA;
  --nav-tab:        #6B7280;
  --nav-tab-hover:  #F4F6FA;
  --nav-tab-active: #00F0FF;
  --nav-user:       #6B7280;
  --nav-signout:    #374151;

  --bg-primary:     var(--bg);
  /* Sidebars / headers — 85% opacity so frame is clearly present but
     ambient shimmer can still be felt at the edges. */
  --bg-secondary:   rgba(19, 23, 30, 0.85);
  --bg-tertiary:    var(--surface-2);
  --bg-hover:       var(--surface-hover);
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);

  /* Legacy aliases (index.html and older inline styles) */
  --text2:    var(--text-2);
  --text3:    var(--text-3);
  --border2:  var(--border-dim);
  --surface2: var(--surface-2);
  --surface3: var(--surface-3);

  --success: var(--emerald);
  --error:   var(--red);
  --warning: var(--yellow);

  /* Semantic contract for opt-in shells; legacy primitives keep their values. */
  --color-bg:            var(--bg);
  --color-surface:       var(--surface);
  --color-surface-muted: var(--surface-2);
  --color-text-primary:  var(--text);
  --color-text-muted:    var(--text-muted);
  --color-border:        var(--border);
  --color-action:        var(--accent);
  --color-action-soft:   var(--accent-dim);
  --color-on-action:     var(--on-accent);
  --color-danger:        var(--error);
  --color-success:       var(--success);
  --color-warning:       var(--warning);

  /* Irregular bottom ambient (base.css) — multi-ellipse mesh, not linear/radial-only.
   * 2026-04-29 (v3): blues desaturated and dimmed (more muted slate vs the
   * earlier vivid royal-blue mix). Movement comes from base.css faster cycle
   * + wider opacity swing rather than from saturation. */
  --ambient-blob-1: rgba(40, 58, 96, 0.42);
  --ambient-blob-2: rgba(58, 78, 118, 0.28);
  --ambient-blob-3: rgba(46, 84, 110, 0.20);
  --ambient-blob-4: rgba(72, 96, 140, 0.15);

  /* Kanban (`build-html.js`) — legacy var names */
  --bg2:   var(--bg-raised);
  --focus: var(--accent);
  --fg:    var(--text);
  --muted: var(--text-muted);
}

/* ── Sovereign Light (Alabaster Slate) ────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  /* Base stepped down to create visible depth against --bg-raised (#FFF). */
  --bg:             #E4E7EC;
  --bg-raised:      #FFFFFF;
  /* Light-mode sidebar surface — 85% opacity to match dark-mode sidebar. */
  --bg-secondary:   rgba(255, 255, 255, 0.85);
  --surface:        rgba(255, 255, 255, 0.90);
  --surface-1:      #FFFFFF;
  --surface-2:      rgba(228, 231, 236, 0.92);
  --surface-3:      rgba(215, 219, 227, 0.92);
  --surface-hover:  rgba(17, 24, 39, 0.08);
  --overlay:        rgba(17, 24, 39, 0.40);
  --glass:          rgba(228, 231, 236, 0.92);
  --header-bg:      rgba(228, 231, 236, 0.94);

  --border:         rgba(17, 24, 39, 0.28);
  --border-strong:  rgba(17, 24, 39, 0.48);
  --border-dim:     rgba(17, 24, 39, 0.16);

  --text:           #0D1117;
  --text-2:         #1F2937;
  --text-3:         #374151;
  --text-muted:     #374151;
  --text-prose:     var(--text);

  --code-inline-bg:     rgba(17, 24, 39, 0.08);
  --code-inline-border: rgba(17, 24, 39, 0.16);
  --code-block-bg:      #F3F4F6;

  /* In light mode, obsidian ink is the primary action color (--brand removed, use --accent) */
  --accent:         #111827;
  --accent-dim:     rgba(17, 24, 39, 0.06);
  --accent-line:    rgba(17, 24, 39, 0.20);
  --on-accent:      #EEF0F3;

  --link:           #111827;

  --green:          #166534;
  --green-dim:      rgba(22, 101, 52, 0.12);
  --emerald:        #047857;
  --emerald-dim:    rgba(4, 120, 87, 0.12);

  --red:            #dc2626;
  --red-dim:        rgba(220, 38, 38, 0.08);

  --yellow:         #ca8a04;
  --yellow-dim:     rgba(202, 138, 4, 0.10);

  --blue:           #2563eb;
  --blue-dim:       rgba(37, 99, 235, 0.08);
  --cyan:           #0891b2;
  --cyan-dim:       rgba(8, 145, 178, 0.08);

  --purple:         #7c3aed;
  --purple-dim:     rgba(124, 58, 237, 0.08);
  --indigo:         #4f46e5;
  --indigo-dim:     rgba(79, 70, 229, 0.08);

  --orange:         #ea580c;
  --orange-dim:     rgba(234, 88, 12, 0.08);

  --pink:           #db2777;
  --pink-dim:       rgba(219, 39, 119, 0.08);

  /* Agent signature hues — light theme (deep, saturated; match server.js
     KNOWN_STYLES so the colored emoji avatar + label text stay coherent). */
  --agent-cto:  #0284c7;  --agent-cfo:  #059669;  --agent-cmo:  #d97706;
  --agent-coo:  #7c3aed;  --agent-cpo:  #db2777;  --agent-clo:  #e11d48;
  --agent-cro:  #0f766e;  --agent-cco:  #ea580c;  --agent-cio:  #0891b2;
  --agent-cso:  #dc2626;  --agent-cos:  #65a30d;  --agent-bco:  #9333ea;
  --agent-chro: #c026d3;  --agent-meta: #6366f1;  --agent-perm: #16a34a;
  --agent-vor:  #475569;  --agent-main: #be123c;

  --shadow-sm:      0 1px 3px rgba(17, 24, 39, 0.10);
  --shadow:         0 2px 10px rgba(17, 24, 39, 0.14);
  --shadow-lg:      0 8px 28px rgba(17, 24, 39, 0.18);

  /* Light-mode glint — bright top highlight (white over the alabaster bg)
     and a soft slate drop. Subtler than dark mode because the contrast
     against the page is already lower. */
  --glint-top:    inset 0 1px 0 0 rgba(255, 255, 255, 0.90);
  --glint-card:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 0 rgba(17, 24, 39, 0.10),
    inset -1px 0 0 0 rgba(17, 24, 39, 0.04);

  --nav-bg:         rgba(228, 231, 236, 0.94);
  --nav-border:     rgba(17, 24, 39, 0.28);
  --nav-brand:      #0D1117;
  --nav-tab:        #1F2937;
  --nav-tab-hover:  #0D1117;
  --nav-tab-active: #0D1117;
  --nav-user:       #1F2937;
  --nav-signout:    #374151;

  --success: var(--emerald);
  --error:   var(--red);
  --warning: var(--yellow);

  /* Light: subtle darker mist at bottom; pulse deepens slightly (see base.css).
   * Alphas bumped 2026-04-28 in proportion to dark-mode bump (~1.5×). */
  --ambient-blob-1: rgba(75, 88, 118, 0.22);
  --ambient-blob-2: rgba(95, 105, 138, 0.17);
  --ambient-blob-3: rgba(55, 72, 108, 0.14);
  --ambient-blob-4: rgba(120, 130, 160, 0.11);
}

/* ── Responsive breakpoints ─────────────────────────────────────────────────
 * CSS custom properties cannot be used in @media queries.
 * Use these literal values consistently — do NOT use other breakpoints.
 *
 *   Mobile (phones):          @media (max-width: 480px)
 *   Tablet (tablets/laptops): @media (max-width: 1024px)
 *   Desktop:                  implicit (>= 1025px, existing styles)
 * ─────────────────────────────────────────────────────────────────────────── */

/* Opt-in workspace review themes; legacy values above remain unchanged. */
:root[data-ui='redesign'] {
  /* Avatar samples, adjusted for text contrast. */
  --color-palette-blue: #52699d;
  --color-palette-blue-soft: #eff2f9;
  --color-palette-teal: #3c737c;
  --color-palette-teal-soft: #edf5f7;
  --color-palette-violet: #885990;
  --color-palette-violet-soft: #f7f0f8;
  --color-palette-coral: #b24738;
  --color-palette-coral-soft: #fdedeb;
  --color-palette-amber: #88673e;
  --color-palette-amber-soft: #fcf6ee;
  --color-palette-sage: #567150;
  --color-palette-sage-soft: #eff2ee;
  --color-info: var(--color-palette-blue);
  --color-info-soft: var(--color-palette-blue-soft);
  --color-knowledge: var(--color-palette-violet);
  --color-knowledge-soft: var(--color-palette-violet-soft);
  --color-project: var(--color-palette-teal);
  --color-project-soft: var(--color-palette-teal-soft);
  --color-agent-fallback: var(--color-text-secondary);
  --color-agent-fallback-soft: var(--color-surface-muted);
  --agent-cto: var(--color-palette-blue);
  --agent-cto-soft: var(--color-palette-blue-soft);
  --agent-cfo: var(--color-palette-teal);
  --agent-cfo-soft: var(--color-palette-teal-soft);
  --agent-cmo: var(--color-palette-violet);
  --agent-cmo-soft: var(--color-palette-violet-soft);
  --agent-coo: var(--color-palette-blue);
  --agent-coo-soft: var(--color-palette-blue-soft);
  --agent-cpo: var(--color-palette-teal);
  --agent-cpo-soft: var(--color-palette-teal-soft);
  --agent-clo: var(--color-palette-violet);
  --agent-clo-soft: var(--color-palette-violet-soft);
  --agent-cro: var(--color-palette-teal);
  --agent-cro-soft: var(--color-palette-teal-soft);
  --agent-cco: var(--color-palette-coral);
  --agent-cco-soft: var(--color-palette-coral-soft);
  --agent-cio: var(--color-palette-blue);
  --agent-cio-soft: var(--color-palette-blue-soft);
  --agent-cso: var(--color-palette-coral);
  --agent-cso-soft: var(--color-palette-coral-soft);
  --agent-cos: var(--color-palette-coral);
  --agent-cos-soft: var(--color-palette-coral-soft);
  --agent-bco: var(--color-palette-coral);
  --agent-bco-soft: var(--color-palette-coral-soft);
  --agent-chro: var(--color-palette-coral);
  --agent-chro-soft: var(--color-palette-coral-soft);
  --agent-meta: var(--color-palette-violet);
  --agent-meta-soft: var(--color-palette-violet-soft);
  --agent-perm: var(--color-palette-teal);
  --agent-perm-soft: var(--color-palette-teal-soft);
  --agent-vor: var(--color-agent-fallback);
  --agent-vor-soft: var(--color-agent-fallback-soft);
  --agent-main: var(--color-palette-blue);
  --agent-main-soft: var(--color-palette-blue-soft);
  --agent-ciso: var(--color-palette-blue);
  --agent-ciso-soft: var(--color-palette-blue-soft);
  --agent-salesmgr: var(--color-palette-coral);
  --agent-salesmgr-soft: var(--color-palette-coral-soft);
  /* Legacy consumers resolve to the same semantic pairs in this workspace. */
  --green: var(--color-success);
  --green-dim: var(--color-success-soft);
  --emerald: var(--color-success);
  --emerald-dim: var(--color-success-soft);
  --red: var(--color-danger);
  --red-dim: var(--color-danger-soft);
  --yellow: var(--color-warning);
  --yellow-dim: var(--color-warning-soft);
  --orange: var(--color-warning);
  --orange-dim: var(--color-warning-soft);
  --blue: var(--color-info);
  --blue-dim: var(--color-info-soft);
  --cyan: var(--color-project);
  --cyan-dim: var(--color-project-soft);
  --purple: var(--color-knowledge);
  --purple-dim: var(--color-knowledge-soft);
  --indigo: var(--color-palette-blue);
  --indigo-dim: var(--color-palette-blue-soft);
  --pink: var(--color-palette-coral);
  --pink-dim: var(--color-palette-coral-soft);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-danger);
  --color-theme-light-bg: #f7faff;
  --color-theme-dark-bg: #172330;
  --color-theme-light-sidebar: #f0f6fc;
  --color-theme-dark-sidebar: #1b2938;
  --color-theme-light-border: #dce6f0;
  --color-theme-dark-border: #384e64;
  --color-theme-light-accent: #386c9e;
  --color-theme-dark-accent: #abd4f8;
  --color-bg: var(--color-theme-light-bg);
  --color-surface: #ffffff;
  --color-surface-muted: #eef5fc;
  --color-surface-hover: #e5effa;
  --color-sidebar: var(--color-theme-light-sidebar);
  --color-text: #24364b;
  --color-text-secondary: #566b82;
  --color-text-muted: #586c80;
  --color-border: var(--color-theme-light-border);
  --color-border-strong: #aebfd1;
  /* Sampled from the new S; darkened CTA stops keep white labels readable. */
  --color-logo-orange: #fd5e09;
  --color-logo-pink: #f7177b;
  --color-logo-violet: #6b05f9;
  --color-cta-start: color-mix(in srgb, var(--color-logo-orange) 76%, #000000);
  --color-cta-middle: color-mix(in srgb, var(--color-logo-pink) 82%, #000000);
  --color-cta-end: var(--color-logo-violet);
  --color-cta-surface: var(--color-cta-start);
  --color-cta-text: #ffffff;
  --color-cta-border: transparent;
  --gradient-cta: linear-gradient(180deg, var(--color-cta-start), var(--color-cta-middle) 52%, var(--color-cta-end));
  --gradient-cta-hover: var(--gradient-cta);
  --color-accent: var(--color-theme-light-accent);
  --color-accent-hover: #2b5783;
  --color-accent-soft: #e1eefb;
  --color-on-accent: #ffffff;
  --color-success: var(--color-palette-sage);
  --color-success-soft: var(--color-palette-sage-soft);
  --color-warning: var(--color-palette-amber);
  --color-warning-soft: var(--color-palette-amber-soft);
  --color-danger: #aa4543;
  --color-danger-soft: #f8e9e7;
  --color-overlay: #15283d80;
  --color-skeleton: #e2ebf5;
  --color-scrollbar: #b0c2d5;
  --color-text-primary: var(--color-text);
  --color-action: var(--color-accent);
  --color-action-soft: var(--color-accent-soft);
  --color-on-action: var(--color-on-accent);
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;
  --font-size-body: var(--text-base);
  --font-size-small: var(--text-sm);
  --font-size-caption: var(--text-xs);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;
  --control-height: 2.5rem;
  --touch-target: 2.75rem;
  --sidebar-width: 14.5rem;
  --sidebar-collapsed-width: 5rem;
  --topbar-height: 0px;
  --shadow-sm: 0 1px 2px #20354d06;
  --shadow-overlay: 0 20px 60px #20354d24;
}

:root[data-ui='redesign'][data-theme='dark'] {
  --color-palette-blue: #b3c3e5;
  --color-palette-blue-soft: #2d3f59;
  --color-palette-teal: #a3d0d6;
  --color-palette-teal-soft: #2a4555;
  --color-palette-violet: #d8b8de;
  --color-palette-violet-soft: #3b3c57;
  --color-palette-coral: #f6ada2;
  --color-palette-coral-soft: #453842;
  --color-palette-amber: #ebc798;
  --color-palette-amber-soft: #434547;
  --color-palette-sage: #b5c6b1;
  --color-palette-sage-soft: #2d4046;
  --color-bg: var(--color-theme-dark-bg);
  --color-surface: #202f40;
  --color-surface-muted: #283b4e;
  --color-surface-hover: #334b63;
  --color-sidebar: var(--color-theme-dark-sidebar);
  --color-text: #eaf2fb;
  --color-text-secondary: #b8cade;
  --color-text-muted: #a8bfd5;
  --color-border: var(--color-theme-dark-border);
  --color-border-strong: #6583a0;
  --color-accent: var(--color-theme-dark-accent);
  --color-accent-hover: #c6e3ff;
  --color-accent-soft: #2c4862;
  --color-on-accent: #19334c;
  --color-success: var(--color-palette-sage);
  --color-success-soft: var(--color-palette-sage-soft);
  --color-warning: var(--color-palette-amber);
  --color-warning-soft: var(--color-palette-amber-soft);
  --color-danger: #edaaa0;
  --color-danger-soft: #4b3432;
  --color-overlay: #0b1725b3;
  --color-skeleton: #344a61;
  --color-scrollbar: #607e9d;
  --shadow-sm: 0 1px 2px #00000014;
  --shadow-overlay: 0 20px 60px #00000050;
}

/* Shared identity resolver for React and document-based consumers. */
[data-agent-id] { --agent-accent: var(--color-agent-fallback, var(--accent)); --agent-accent-soft: var(--color-agent-fallback-soft, var(--accent-dim)); }
[data-agent-id="cto"] { --agent-accent: var(--agent-cto); --agent-accent-soft: var(--agent-cto-soft, var(--accent-dim)); }
[data-agent-id="cfo"] { --agent-accent: var(--agent-cfo); --agent-accent-soft: var(--agent-cfo-soft, var(--accent-dim)); }
[data-agent-id="cmo"] { --agent-accent: var(--agent-cmo); --agent-accent-soft: var(--agent-cmo-soft, var(--accent-dim)); }
[data-agent-id="coo"] { --agent-accent: var(--agent-coo); --agent-accent-soft: var(--agent-coo-soft, var(--accent-dim)); }
[data-agent-id="cpo"] { --agent-accent: var(--agent-cpo); --agent-accent-soft: var(--agent-cpo-soft, var(--accent-dim)); }
[data-agent-id="clo"] { --agent-accent: var(--agent-clo); --agent-accent-soft: var(--agent-clo-soft, var(--accent-dim)); }
[data-agent-id="cro"] { --agent-accent: var(--agent-cro); --agent-accent-soft: var(--agent-cro-soft, var(--accent-dim)); }
[data-agent-id="cco"] { --agent-accent: var(--agent-cco); --agent-accent-soft: var(--agent-cco-soft, var(--accent-dim)); }
[data-agent-id="cio"] { --agent-accent: var(--agent-cio); --agent-accent-soft: var(--agent-cio-soft, var(--accent-dim)); }
[data-agent-id="cso"] { --agent-accent: var(--agent-cso); --agent-accent-soft: var(--agent-cso-soft, var(--accent-dim)); }
[data-agent-id="cos"] { --agent-accent: var(--agent-cos); --agent-accent-soft: var(--agent-cos-soft, var(--accent-dim)); }
[data-agent-id="bco"] { --agent-accent: var(--agent-bco); --agent-accent-soft: var(--agent-bco-soft, var(--accent-dim)); }
[data-agent-id="chro"] { --agent-accent: var(--agent-chro); --agent-accent-soft: var(--agent-chro-soft, var(--accent-dim)); }
[data-agent-id="meta"] { --agent-accent: var(--agent-meta); --agent-accent-soft: var(--agent-meta-soft, var(--accent-dim)); }
[data-agent-id="perm"] { --agent-accent: var(--agent-perm); --agent-accent-soft: var(--agent-perm-soft, var(--accent-dim)); }
[data-agent-id="vor"] { --agent-accent: var(--agent-vor); --agent-accent-soft: var(--agent-vor-soft, var(--accent-dim)); }
[data-agent-id="main"] { --agent-accent: var(--agent-main); --agent-accent-soft: var(--agent-main-soft, var(--accent-dim)); }
[data-agent-id="ciso"] { --agent-accent: var(--agent-ciso, var(--color-agent-fallback, var(--accent))); --agent-accent-soft: var(--agent-ciso-soft, var(--accent-dim)); }
[data-agent-id="salesmgr"] { --agent-accent: var(--agent-salesmgr, var(--color-agent-fallback, var(--accent))); --agent-accent-soft: var(--agent-salesmgr-soft, var(--accent-dim)); }

@media (forced-colors: active) {
  :root[data-ui='redesign'] {
    --gradient-cta: none;
    --gradient-cta-hover: none;
    --color-cta-surface: ButtonFace;
    --color-cta-text: ButtonText;
    --color-cta-border: ButtonText;
  }
}