/* ============================================================================
   tokens.css — cybercontroller.org design tokens (base palette / type / scale).
   Extracted verbatim from style.css 2026-07-24 to share the LxveLabs brand-dark
   token system (violet #a371f7, signal green #39FF14, near-black #0a0a0f) + the
   light-theme override across the sites — LxveLabs.com is the top-of-house source.
   Loaded before style.css on every page. Same-origin, CSP-clean, no CDN. Custom
   properties only — a pure refactor: the rendered look is byte-identical. The
   site-specific alias/parity vars (further down in style.css) stay local — they
   alias INTO these base tokens for ported components.
   ============================================================================ */

:root {
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;

  --gutter: 24px;
  --ease: cubic-bezier(.22,.61,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .3s;

  /* accent defaults (dark front door) — the light theme overrides these below */
  --accent: #a371f7;
  --accent-hover: #bb90ff;
  --accent-dim: rgba(163, 113, 247, 0.12);
  --accent-mid: rgba(163, 113, 247, 0.34);
  --on-accent: #0a0a0f;
  --glow: 0 0 0 1px rgba(163, 113, 247,0.14);
  --glow-strong: 0 0 26px rgba(163, 113, 247,0.32);
}
/* ---- DARK (default / front door — premium near-black brand) ---- */
:root,
[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-alt: #101019;
  --bg-card: #14141d;
  --bg-card-hover: #1a1a26;
  --text: #e8ecf2;
  --text-dim: #a2a8b5;
  --text-faint: #6b7080;
  --border: #23232f;
  --border-strong: #34343f;
  --border-accent: rgba(163, 113, 247,0.30);
  --nav-bg: rgba(10,10,15,0.72);
  --nav-bg-solid: rgba(10,10,15,0.92);
  --tag-bg: rgba(163, 113, 247,0.10);
  --tag-text: #b98cff;
  --tag-border: rgba(163, 113, 247,0.26);
  --code-bg: #16161f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -12px rgba(0,0,0,.6);
  --shadow: 0 2px 8px rgba(0,0,0,.42), 0 26px 50px -22px rgba(0,0,0,.6);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.5), 0 60px 100px -34px rgba(0,0,0,.72);
  /* Green is reserved for live/signal states only (shipped firmware, connected devices) —
     never a decorative or button color. Violet stays the one brand/link/UI accent. */
  --live: #39FF14;
  --live-bg: rgba(57,255,20,0.08);
  --live-border: rgba(57,255,20,0.32);
}
/* ---- LIGHT (secondary — brand-light, on the toggle) ---- */
[data-theme="light"] {
  --accent: #7C3AED;
  --accent-hover: #6d28d9;
  --accent-dim: rgba(124,58,237,0.09);
  --accent-mid: rgba(124,58,237,0.28);
  --on-accent: #ffffff;
  --glow: 0 0 0 1px rgba(124,58,237,0.12);
  --glow-strong: 0 0 26px rgba(124,58,237,0.18);
  --bg: #f7f7f8;
  --bg-alt: #f0f0f3;
  --bg-card: #ffffff;
  --bg-card-hover: #f4f4f7;
  --text: #14141a;
  --text-dim: #53565e;
  --text-faint: #82858f;
  --border: #e1e1e8;
  --border-strong: #c7c7d1;
  --border-accent: rgba(124,58,237,0.22);
  --nav-bg: rgba(247,247,248,0.72);
  --nav-bg-solid: rgba(247,247,248,0.92);
  --tag-bg: rgba(124,58,237,0.08);
  --tag-text: #7C3AED;
  --tag-border: rgba(124,58,237,0.22);
  --code-bg: #eeeef2;
  --shadow-sm: 0 1px 2px rgba(20,20,26,.05), 0 6px 16px -8px rgba(20,20,26,.14);
  --shadow: 0 2px 8px rgba(20,20,26,.06), 0 22px 44px -20px rgba(20,20,26,.18);
  --shadow-lg: 0 8px 20px rgba(20,20,26,.07), 0 50px 90px -30px rgba(20,20,26,.24);
  --live: #0f7a37;
  --live-bg: rgba(15,122,55,0.08);
  --live-border: rgba(15,122,55,0.28);
}