/* ============================================================
 * Botify Network — Design Tokens (single source of truth)
 * ------------------------------------------------------------
 * THIS FILE IS THE SSOT. Edit here, then run:
 *   node scripts/design-system/sync-tokens.mjs
 * to mirror into consumer services. A CI check (governance:
 * design-system-sync) verifies every sync target is byte-
 * identical with this file.
 *
 * Sync targets (kept byte-identical with this file):
 *   - services/zoom-multi-tool/public/css/tokens.css
 *
 * Generated 2026-04-20 from a consolidation pass over:
 *   - dashboard.css (legacy v1 + v2 inline tokens)
 *   - kickbot.css   (theme + accent infrastructure)
 *   - kickbot-ui.css (consumer only — no tokens defined)
 *
 * Token rules:
 *   1. Components MUST consume tokens via var(--token).
 *      Raw hex literals in component CSS are banned by stylelint.
 *   2. Component CSS MUST NOT redefine these tokens. Theme/accent
 *      switching is the only allowed override (data-theme/data-color).
 *   3. Token names are kebab-case and grouped semantically
 *      (color, size, spacing, motion, elevation).
 *   4. New colors require a semantic alias; do not introduce
 *      one-off tokens for a single component.
 *
 * Migration map (legacy → new) is at the bottom of this file.
 * ============================================================ */


/* ===== ROOT — base typography, motion, layout, radii ===== */
:root {
  /* Typography — font families */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Typography — sizes (modular scale, ~1.2 ratio) */
  --font-size-xs:   0.7rem;    /* 11.2px */
  --font-size-sm:   0.8rem;    /* 12.8px */
  --font-size-base: 0.875rem;  /* 14px   — default body */
  --font-size-md:   0.95rem;   /* 15.2px */
  --font-size-lg:   1.1rem;    /* 17.6px */
  --font-size-xl:   1.35rem;   /* 21.6px */
  --font-size-2xl:  1.6rem;    /* 25.6px */
  --font-size-3xl:  2.074rem;  /* 33.2px */

  /* Typography — weights & line heights */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-loose:   1.75;

  /* Spacing — 4px grid (single canonical scale; legacy --sp-* deprecated) */
  --space-0:   0;
  --space-px:  1px;
  --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-20:  80px;

  /* Border widths */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* Border radii */
  --radius-none: 0;
  --radius-sm:   0.375rem;   /* 6px  */
  --radius-md:   0.625rem;   /* 10px */
  --radius-lg:   0.875rem;   /* 14px */
  --radius-xl:   1.125rem;   /* 18px */
  --radius-2xl:  1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* Layout primitives -- 2026-05-13 alignment audit:
   *   sidebar 240 -> 256 (gives label budget for 'Content Review' + 99+ badge)
   *   header  56  -> 60  (matches KPI tile vertical rhythm)
   *   content-pad-x promoted from kickbot.css local to a global token
   */
  --layout-sidebar-width:  256px;
  --layout-header-height:  60px;
  --layout-content-max:    1440px;
  --layout-content-pad-x:  28px;

  /* Motion — durations */
  --duration-instant: 0s;
  --duration-fast:    0.12s;
  --duration-normal:  0.2s;
  --duration-slow:    0.35s;

  /* Motion — easings */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale (use these — do not invent values) */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* Focus ring — applied via :focus-visible in base.css */
  --focus-ring-color: var(--accent, #00ff88);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--bg, #000), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* Shadows / elevation (single canonical scale; --shadow-lg-v2 deprecated) */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:    0 4px 12px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.20);
  --shadow-lg:    0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -4px rgba(0, 0, 0, 0.20);
  --shadow-xl:    0 16px 40px -8px rgba(0, 0, 0, 0.50), 0 8px 16px -8px rgba(0, 0, 0, 0.25);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Glassmorphism */
  --glass-blur:           20px;
  --glass-blur-heavy:     40px;
  --glass-saturation:     saturate(180%);
  --backdrop-glass:       blur(var(--glass-blur)) var(--glass-saturation);
  --backdrop-glass-heavy: blur(var(--glass-blur-heavy)) var(--glass-saturation);

  /* Semantic color tokens — feedback (theme-invariant for now) */
  --color-success:       #00ff88;
  --color-success-dim:   rgba(0, 255, 136, 0.12);
  --color-success-dark:  #00cc6a;
  --color-warning:       #ffaa00;
  --color-warning-dim:   rgba(255, 170, 0, 0.12);
  --color-danger:        #ff3355;
  --color-danger-dim:    rgba(255, 51, 85, 0.12);
  --color-danger-dark:   #cc2244;
  --color-info:          #00f5ff;
  --color-info-dim:      rgba(0, 245, 255, 0.12);

  /* Domain-specific status colors (mirror CLAUDE.md role/state vocabulary) */
  --color-protected: var(--color-success);
  --color-banned:    #ff006e;
  --color-locked:    var(--color-danger);

  /* Chart palette — 8 distinguishable hues, neon-on-OLED */
  --chart-1: #00ff88;
  --chart-2: #00f5ff;
  --chart-3: #bf5af2;
  --chart-4: #ffaa00;
  --chart-5: #ff3355;
  --chart-6: #ff6b35;
  --chart-7: #4cc9f0;
  --chart-8: #ff006e;

  /* ==========================================================
   * OVERLAYS — scrims + tints (U3.0 added 2026-04-22, ADR-002;
   * U3.3b scale expansion 2026-04-22, ADR-002 addendum)
   * ----------------------------------------------------------
   * Scrims  = neutral (black/white) layer treatments.
   * Tints   = semantic color washes at stepped alpha.
   * RGB channels on the tint scale match --color-<name>
   * primitives above, so a tint reads as the same hue at
   * reduced opacity.
   *
   * Canonical semantic scale: -subtle / base / -strong.
   * U3.3b expansion: numeric-suffix steps (-NN where NN = alpha
   * x 100) fill intermediate gaps observed in the U3.3
   * classifier histograms (post-U3.3a scan: 216 known-base
   * alpha-OOB occurrences + 109 near-tolerance needs-review
   * clusters). Semantic suffixes are preserved for U3.3a
   * consumers; only tint-*-strong absorbs a value change from
   * alpha 0.24 to 0.25 (covers 13+ near-miss consumer values).
   *
   * Consumers should reach these via the --ds-scrim-* and
   * --ds-tint-* aliases in ds.css, not the raw primitives here.
   * ========================================================== */

  /* Scrims — dark overlays (modals, dim backdrops) */
  --scrim-subtle:            rgba(0, 0, 0, 0.12);
  --scrim-medium:            rgba(0, 0, 0, 0.40);
  --scrim-heavy:             rgba(0, 0, 0, 0.70);

  /* Scrims — numeric-suffix expansion (U3.3b) — fills 0.12-0.70 gaps */
  --scrim-20:                rgba(0, 0, 0, 0.20);
  --scrim-30:                rgba(0, 0, 0, 0.30);
  --scrim-50:                rgba(0, 0, 0, 0.50);
  --scrim-60:                rgba(0, 0, 0, 0.60);

  /* Scrims — light overlays (raised surfaces on dark themes: sidebar
   * selected/hover, glass panes). Named "-highlight-" to avoid confusion
   * with [data-theme="light"] — these apply regardless of theme. */
  --scrim-highlight-subtle:  rgba(255, 255, 255, 0.04);
  --scrim-highlight:         rgba(255, 255, 255, 0.08);
  --scrim-highlight-strong:  rgba(255, 255, 255, 0.16);

  /* Scrim highlights — numeric-suffix expansion (U3.3b) */
  --scrim-highlight-02:      rgba(255, 255, 255, 0.02);
  --scrim-highlight-03:      rgba(255, 255, 255, 0.03);
  --scrim-highlight-05:      rgba(255, 255, 255, 0.05);
  --scrim-highlight-06:      rgba(255, 255, 255, 0.06);
  --scrim-highlight-10:      rgba(255, 255, 255, 0.10);
  --scrim-highlight-12:      rgba(255, 255, 255, 0.12);

  /* Tints — semantic washes (success / warning / danger / info).
   * U3.3b: -strong promoted from alpha 0.24 to 0.25 to absorb
   * near-miss consumer values (13+ occurrences in classifier scan). */
  --tint-success-subtle:     rgba(0, 255, 136, 0.06);
  --tint-success:            rgba(0, 255, 136, 0.15);
  --tint-success-strong:     rgba(0, 255, 136, 0.25);

  --tint-warning-subtle:     rgba(255, 170, 0, 0.06);
  --tint-warning:            rgba(255, 170, 0, 0.15);
  --tint-warning-strong:     rgba(255, 170, 0, 0.25);

  --tint-danger-subtle:      rgba(255, 51, 85, 0.06);
  --tint-danger:             rgba(255, 51, 85, 0.15);
  --tint-danger-strong:      rgba(255, 51, 85, 0.25);

  --tint-info-subtle:        rgba(0, 245, 255, 0.06);
  --tint-info:               rgba(0, 245, 255, 0.15);
  --tint-info-strong:        rgba(0, 245, 255, 0.25);

  /* chart-3 (vivid purple) tints — for badges/widgets that key on
   * --chart-3 as their accent. Added per ADR-002 so consumer CSS can
   * reference these primitives instead of raw rgba(191, 90, 242, ...). */
  --tint-chart-3-subtle:     rgba(191, 90, 242, 0.06);
  --tint-chart-3-12:         rgba(191, 90, 242, 0.12);
  --tint-chart-3:            rgba(191, 90, 242, 0.15);
  --tint-chart-3-strong:     rgba(191, 90, 242, 0.25);

  /* Tints — numeric-suffix expansion (U3.3b, per-family gaps) */
  --tint-success-10:         rgba(0, 255, 136, 0.10);
  --tint-success-12:         rgba(0, 255, 136, 0.12);
  --tint-success-20:         rgba(0, 255, 136, 0.20);
  --tint-success-30:         rgba(0, 255, 136, 0.30);
  --tint-success-50:         rgba(0, 255, 136, 0.50);

  --tint-danger-12:          rgba(255, 51, 85, 0.12);
  --tint-danger-20:          rgba(255, 51, 85, 0.20);
  --tint-danger-30:          rgba(255, 51, 85, 0.30);

  --tint-info-08:            rgba(0, 245, 255, 0.08);
  --tint-info-10:            rgba(0, 245, 255, 0.10);
  --tint-info-20:            rgba(0, 245, 255, 0.20);
  --tint-info-30:            rgba(0, 245, 255, 0.30);
}


/* ============================================================
 * ACCENT (data-color) — theme-orthogonal accent overlay.
 * Switching accent must NEVER change layout or component shape.
 * ============================================================ */
[data-color="green"]  { --accent: #00ff88; --accent-dark: #00cc6a; --accent-dim: rgba(0,255,136,0.12); --glow-accent: 0 0 20px rgba(0,255,136,0.25); }
[data-color="cyan"]   { --accent: #00f5ff; --accent-dark: #00c4cc; --accent-dim: rgba(0,245,255,0.12); --glow-accent: 0 0 20px rgba(0,245,255,0.25); }
[data-color="blue"]   { --accent: #4cc9f0; --accent-dark: #3aa3c4; --accent-dim: rgba(76,201,240,0.12); --glow-accent: 0 0 20px rgba(76,201,240,0.25); }
[data-color="purple"] { --accent: #bf5af2; --accent-dark: #9944cc; --accent-dim: rgba(191,90,242,0.12); --glow-accent: 0 0 20px rgba(191,90,242,0.25); }
[data-color="gold"]   { --accent: #ffd700; --accent-dark: #ccac00; --accent-dim: rgba(255,215,0,0.12);  --glow-accent: 0 0 20px rgba(255,215,0,0.25); }
[data-color="pink"]   { --accent: #ff006e; --accent-dark: #cc0058; --accent-dim: rgba(255,0,110,0.12);  --glow-accent: 0 0 20px rgba(255,0,110,0.25); }


/* ============================================================
 * THEME (data-theme) — surface + text + border palette.
 * All themes MUST define every token in this block.
 * ============================================================ */

/* OLED — pure black; default for the dashboard */
[data-theme="oled"] {
  --bg:                   #000000;
  --bg-secondary:         #000000;
  --bg-tertiary:          #030304;
  --bg-card:              #000000;
  --bg-card-hover:        #060608;
  --bg-input:             #050506;
  --bg-overlay:           rgba(0, 0, 0, 0.85);
  --bg-sidebar:           #000000;
  --bg-glass:             rgba(0, 0, 0, 0.98);
  --bg-glass-card:        rgba(255, 255, 255, 0.015);
  --bg-glass-card-hover:  rgba(255, 255, 255, 0.03);
  --bg-glass-elevated:    rgba(255, 255, 255, 0.02);

  --text:                 #ffffff;
  --text-secondary:       #8888aa;
  --text-muted:           #555566;
  --text-inverse:         #111118;

  --border:               rgba(255, 255, 255, 0.06);
  --border-hover:         rgba(255, 255, 255, 0.12);
  --border-active:        rgba(255, 255, 255, 0.18);
  --border-glass:         rgba(255, 255, 255, 0.06);
  --border-glass-hover:   rgba(255, 255, 255, 0.12);
  --border-glow:          rgba(0, 255, 136, 0.25);

  --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.6);
}

/* DARK — softer charcoal; for fatigue-sensitive sessions */
[data-theme="dark"] {
  --bg:                   #0a0a0f;
  --bg-secondary:         #0e0e14;
  --bg-tertiary:          #16161e;
  --bg-card:              #111118;
  --bg-card-hover:        #16161e;
  --bg-input:             #0e0e14;
  --bg-overlay:           rgba(10, 10, 15, 0.85);
  --bg-sidebar:           #0a0a0f;
  --bg-glass:             rgba(10, 10, 15, 0.94);
  --bg-glass-card:        rgba(255, 255, 255, 0.025);
  --bg-glass-card-hover:  rgba(255, 255, 255, 0.04);
  --bg-glass-elevated:    rgba(255, 255, 255, 0.03);

  --text:                 #e8e8f0;
  --text-secondary:       #8888aa;
  --text-muted:           #555566;
  --text-inverse:         #111118;

  --border:               rgba(255, 255, 255, 0.08);
  --border-hover:         rgba(255, 255, 255, 0.14);
  --border-active:        rgba(255, 255, 255, 0.20);
  --border-glass:         rgba(255, 255, 255, 0.08);
  --border-glass-hover:   rgba(255, 255, 255, 0.14);
  --border-glow:          rgba(0, 255, 136, 0.25);

  --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.4);
}

/* LIGHT — for daytime / light-mode users (incl. Telegram light theme) */
[data-theme="light"] {
  --bg:                   #f4f5f7;
  --bg-secondary:         #ffffff;
  --bg-tertiary:          #ebedf0;
  --bg-card:              #ffffff;
  --bg-card-hover:        #f8f9fb;
  --bg-input:             #f0f1f3;
  --bg-overlay:           rgba(244, 245, 247, 0.9);
  --bg-sidebar:           #ffffff;
  --bg-glass:             rgba(255, 255, 255, 0.92);
  --bg-glass-card:        rgba(0, 0, 0, 0.025);
  --bg-glass-card-hover:  rgba(0, 0, 0, 0.04);
  --bg-glass-elevated:    rgba(0, 0, 0, 0.03);

  --text:                 #111118;
  --text-secondary:       #555566;
  --text-muted:           #8888aa;
  --text-inverse:         #ffffff;

  --border:               rgba(0, 0, 0, 0.08);
  --border-hover:         rgba(0, 0, 0, 0.14);
  --border-active:        rgba(0, 0, 0, 0.20);
  --border-glass:         rgba(0, 0, 0, 0.08);
  --border-glass-hover:   rgba(0, 0, 0, 0.14);
  --border-glow:          rgba(0, 204, 106, 0.30);

  --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.08);
}


/* ============================================================
 * SYSTEM PREFERENCES — auto-apply theme + reduced motion.
 * Component CSS does not need to repeat these queries.
 * ============================================================ */

/* Honor OS dark/light when no explicit data-theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:                   #f4f5f7;
    --bg-secondary:         #ffffff;
    --bg-tertiary:          #ebedf0;
    --bg-card:              #ffffff;
    --bg-card-hover:        #f8f9fb;
    --bg-input:             #f0f1f3;
    --bg-overlay:           rgba(244, 245, 247, 0.9);
    --bg-sidebar:           #ffffff;
    --text:                 #111118;
    --text-secondary:       #555566;
    --text-muted:           #8888aa;
    --border:               rgba(0, 0, 0, 0.08);
    --border-hover:         rgba(0, 0, 0, 0.14);
    --border-active:        rgba(0, 0, 0, 0.20);
    --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.08);
  }
}

/* Reduced motion: collapse durations to near-zero. Easings still apply
 * so micro-state changes (hover / focus) remain perceptible. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0.001ms;
    --duration-normal: 0.001ms;
    --duration-slow:   0.001ms;
  }
}

/* Forced-colors (Windows High Contrast) — surface neutral system tokens */
@media (forced-colors: active) {
  :root {
    --focus-ring-color: CanvasText;
    --border:           CanvasText;
    --border-hover:     Highlight;
    --border-active:    Highlight;
  }
}


/* ============================================================
 * MIGRATION MAP — legacy → new
 * Run `grep -nE "<legacy>" services/botify-network-admin/src/web/public`
 * before deleting; legacy tokens are kept as aliases below for one
 * release cycle. Schedule removal in v2.1.
 * ============================================================
 *   --sp-1..10              → --space-1..10           (scale identical)
 *   --font                  → --font-sans
 *   --text-xs..2xl (size)   → --font-size-xs..2xl
 *   --text-primary (color)  → --text                  (kept as alias)
 *   --text-secondary        → unchanged
 *   --text-muted            → unchanged
 *   --bg-primary            → --bg                    (kept as alias)
 *   --shadow-lg-v2          → --shadow-lg             (single scale now)
 *   --primary               → --accent                (semantic accent)
 *   --primary-dark          → --accent-dark
 *   --primary-light         → REMOVED — use --accent + opacity
 *   --secondary             → REMOVED — use --text-muted or theme bg
 *   --success/warning/error → --color-success/warning/danger
 *   --error/-dim            → --color-danger/-dim
 *   --info/-dim             → --color-info/-dim
 *   --dur-fast/normal/slow  → --duration-fast/normal/slow
 *   --ease                  → --ease-default
 *   --sidebar-w             → --layout-sidebar-width
 *   --header-h              → --layout-header-height
 *   --protected-color       → --color-protected
 *   --banned-color          → --color-banned
 *   --locked-color          → --color-locked
 * ============================================================ */

/* Legacy aliases — keep through v2.0; drop in v2.1.
 * DO NOT add new usages of these. Stylelint plugin
 * `botify-no-legacy-tokens` (see docs/design-system/) flags new ones. */
:root {
  --sp-1: var(--space-1);  --sp-2: var(--space-2);  --sp-3: var(--space-3);
  --sp-4: var(--space-4);  --sp-5: var(--space-5);  --sp-6: var(--space-6);
  --sp-8: var(--space-8);  --sp-10: var(--space-10);

  --font:           var(--font-sans);
  --text-xs:        var(--font-size-xs);
  --text-sm:        var(--font-size-sm);
  --text-base:      var(--font-size-base);
  --text-md:        var(--font-size-md);
  --text-lg:        var(--font-size-lg);
  --text-xl:        var(--font-size-xl);
  --text-2xl:       var(--font-size-2xl);
  --text-3xl:       var(--font-size-3xl);

  --text-primary:   var(--text);
  --bg-primary:     var(--bg);

  --primary:        var(--accent, #00ff88);
  --primary-dark:   var(--accent-dark, #00cc6a);

  --success:        var(--color-success);
  --success-dim:    var(--color-success-dim);
  --success-dark:   var(--color-success-dark);
  --warning:        var(--color-warning);
  --warning-dim:    var(--color-warning-dim);
  --danger:         var(--color-danger);
  --danger-dark:    var(--color-danger-dark);
  --error:          var(--color-danger);
  --error-dim:      var(--color-danger-dim);
  --info:           var(--color-info);
  --info-dim:       var(--color-info-dim);

  --dur-fast:       var(--duration-fast);
  --dur-normal:     var(--duration-normal);
  --dur-slow:       var(--duration-slow);
  --ease:           var(--ease-default);

  --sidebar-w:      var(--layout-sidebar-width);
  --header-h:       var(--layout-header-height);
  --content-pad-x:  var(--layout-content-pad-x);
  --content-max:    var(--layout-content-max);

  --protected-color: var(--color-protected);
  --banned-color:    var(--color-banned);
  --locked-color:    var(--color-locked);

  --shadow-lg-v2:   var(--shadow-lg);
}

/* Default theme = OLED (matches current dashboard.html behavior).
 * Override at the <html> tag with data-theme="dark" or "light". */
:root:not([data-theme]) {
  /* Apply OLED tokens at root so consumers without an explicit attr
   * still resolve --bg, --text, etc. */
  --bg:                   #000000;
  --bg-secondary:         #000000;
  --bg-tertiary:          #030304;
  --bg-card:              #000000;
  --bg-card-hover:        #060608;
  --bg-input:             #050506;
  --bg-overlay:           rgba(0, 0, 0, 0.85);
  --bg-sidebar:           #000000;
  --text:                 #ffffff;
  --text-secondary:       #8888aa;
  --text-muted:           #555566;
  --border:               rgba(255, 255, 255, 0.06);
  --border-hover:         rgba(255, 255, 255, 0.12);
  --border-active:        rgba(255, 255, 255, 0.18);
  --shadow-card:          0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Default accent = green (matches current dashboard.html behavior). */
:root:not([data-color]) {
  --accent:      #00ff88;
  --accent-dark: #00cc6a;
  --accent-dim:  rgba(0, 255, 136, 0.12);
  --glow-accent: 0 0 20px rgba(0, 255, 136, 0.25);
}

/* ──────────────────────────────────────────────────────────────
 * Hostbot Assignments dashboard palette
 * Added 2026-05-15 by U3 cleanup pass to tokenize the previously
 * untokenized hostbot-assignments.css. Palette uses muted blues +
 * fail-state reds for the control-plane dashboard; values lifted
 * verbatim from the source CSS (zero visual drift). Future palette
 * changes happen here, not by editing raw hex in the consumer.
 * Naming convention: --hba-<role>[-<variant>].
 * ────────────────────────────────────────────────────────────── */
:root {
  /* Banners */
  --hba-banner-bg:           #0c1626;
  --hba-banner-info-bg:      #142037;
  --hba-banner-text:         #e8edf5;
  --hba-banner-title:        #8aa1c4;
  --hba-fail-bg:             #2b0d10;
  --hba-fail-border:         #ff3b30;
  --hba-fail-text:           #ffd6d4;
  --hba-fail-heading:        #ff8a82;
  --hba-route-fail:          #ffb4af;
  --hba-fail-strong:         #ff5950;

  /* Tags + accents */
  --hba-tag-bg:              #1a2942;
  --hba-tag-text:            #6db4ff;
  --hba-tag-warn-bg:         #d4a800;
  --hba-tag-warn-text:       #2a1f00;

  /* Tables + surfaces */
  --hba-table-bg:            #0a1220;
  --hba-table-text:          #d8e1ee;
  --hba-row-hover:           #122036;
  --hba-row-selected:        #1a3052;
  --hba-row-border:          #1a2942;

  /* Text */
  --hba-muted:               #6079a1;
  --hba-heading:             #ffffff;
  --hba-ok:                  #4eda87;

  /* Callouts */
  --hba-callout-ok-bg:       #1d3a1d;
  --hba-invariant-bg:        #0d2f1a;
  --hba-invariant-border:    #4eda87;
  --hba-preview-bg:          #0d1c33;
  --hba-answer-bg:           #0a3a14;
  --hba-answer-text:         #d6f5cd;

  /* Buttons */
  --hba-btn-border:          #1f3050;
  --hba-btn-primary:         #2865d4;
  --hba-btn-primary-hover:   #3475e2;
  --hba-btn-secondary-hover: #243558;
  --hba-btn-danger:          #6e2828;
  --hba-btn-danger-hover:    #8a3535;
  --hba-btn-failback:        #2a4d6b;
  --hba-action-border:       #2a3a52;
}

/* ──────────────────────────────────────────────────────────────
 * Theme + accent overrides — migrated from kickbot.css 2026-05-16
 * per ADR-002 ("only tokens.css / ds.css may define primitives").
 * data-theme / data-color attribute switching on <html> resolves
 * here. Source order is preserved relative to the prior in-file
 * arrangement to maintain identical cascade.
 * ────────────────────────────────────────────────────────────── */

/* Accent color schemes (selected via [data-color="…"]) */
[data-color="green"]  { --accent: #00ff88; --accent-dark: #00cc6a; --accent-dim: rgba(0,255,136,0.12); --glow-accent: 0 0 20px rgba(0,255,136,0.25); }
[data-color="cyan"]   { --accent: #00f5ff; --accent-dark: #00c4cc; --accent-dim: rgba(0,245,255,0.12); --glow-accent: 0 0 20px rgba(0,245,255,0.25); }
[data-color="blue"]   { --accent: #4cc9f0; --accent-dark: #3aa3c4; --accent-dim: rgba(76,201,240,0.12); --glow-accent: 0 0 20px rgba(76,201,240,0.25); }
[data-color="purple"] { --accent: #bf5af2; --accent-dark: #9944cc; --accent-dim: rgba(191,90,242,0.12); --glow-accent: 0 0 20px rgba(191,90,242,0.25); }
[data-color="gold"]   { --accent: #ffd700; --accent-dark: #ccac00; --accent-dim: rgba(255,215,0,0.12);  --glow-accent: 0 0 20px rgba(255,215,0,0.25); }
[data-color="pink"]   { --accent: #ff006e; --accent-dark: #cc0058; --accent-dim: rgba(255,0,110,0.12);  --glow-accent: 0 0 20px rgba(255,0,110,0.25); }

/* Theme: OLED (default) */
[data-theme="oled"] {
  --bg: #000000;
  --bg-secondary: #000000;
  --bg-card: #000000;
  --bg-card-hover: #060608;
  --bg-input: #050506;
  --bg-overlay: rgba(0,0,0,0.85);
  --bg-sidebar: #000000;
  --text: #ffffff;
  --text-secondary: #8888aa;
  --text-muted: #555566;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --border-active: rgba(255,255,255,0.18);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.6);
}

/* Theme: Dark */
[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-secondary: #0e0e14;
  --bg-card: #111118;
  --bg-card-hover: #16161e;
  --bg-input: #0e0e14;
  --bg-overlay: rgba(10,10,15,0.85);
  --bg-sidebar: #0a0a0f;
  --text: #e8e8f0;
  --text-secondary: #8888aa;
  --text-muted: #555566;
  --border: var(--ds-scrim-highlight);
  --border-hover: rgba(255,255,255,0.14);
  --border-active: rgba(255,255,255,0.20);
  --shadow-card: 0 2px 12px var(--ds-scrim-medium);
}

/* Theme: Light */
[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fb;
  --bg-input: #f0f1f3;
  --bg-overlay: rgba(244,245,247,0.9);
  --bg-sidebar: #ffffff;
  --text: #111118;
  --text-secondary: #555566;
  --text-muted: #8888aa;
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.14);
  --border-active: rgba(0,0,0,0.20);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
}
/* Light theme: accent-dim inherits from color scheme (not overridden to gray) */

/* Status Colors (non-primitive, but kept here for centralized palette) */
:root {
  --success: #10b981; --success-dim: rgba(16,185,129,0.12);
  --error: #ff3355;   --error-dim: rgba(255,51,85,0.12);
  --warning: #ffaa00; --warning-dim: rgba(255,170,0,0.12);
  --info: #4cc9f0;    --info-dim: rgba(76,201,240,0.12);
  --protected-color: #00ff88;
  --banned-color: #ff006e;
  --locked-color: #ff3355;
}