/* Overhub UI tokens: verbatim from overhub-ui@0.1.0 (dark + light). Do not edit here. */
:root {
  color-scheme: dark;
  --bg-base: #040507;
  --bg-elevated: #0a0d12;
  --bg-surface: #0f141d;
  --bg-surface-strong: #131b28;
  --bg-panel: rgba(11, 16, 24, 0.88);
  --bg-panel-strong: rgba(8, 12, 18, 0.96);
  --border-soft: rgba(178, 201, 235, 0.12);
  --border-strong: rgba(178, 201, 235, 0.22);
  --border-accent: rgba(164, 201, 255, 0.44);
  --text-primary: #f4f8ff;
  --text-secondary: rgba(226, 236, 252, 0.78);
  --text-dim: rgba(176, 192, 218, 0.56);
  --scrollbar-track: rgba(4, 5, 7, 0.35);
  --scrollbar-thumb: rgba(176, 192, 218, 0.32);
  --scrollbar-thumb-hover: rgba(176, 192, 218, 0.5);
  --accent: #9ac2ff;
  --accent-cold: #e3efff;
  --accent-soft: rgba(154, 194, 255, 0.16);
  --accent-glow: rgba(154, 194, 255, 0.22);
  --accent-rgb:
    154,
    194,
    255;
  --accent-ink: #05070a;
  --ai: #ffb070;
  --ai-soft: rgba(255, 176, 112, 0.14);
  --ai-glow: rgba(255, 176, 112, 0.30);
  --ai-rgb:
    255,
    176,
    112;
  --ai-text: var(--ai);
  --ai-border: rgba(255, 176, 112, 0.45);
  --cta-ink: #241204;
  --bg2: var(--bg-elevated);
  --surface: var(--bg-surface);
  --text: var(--text-primary);
  --body: var(--text-secondary);
  --muted: var(--text-dim);
  --muted2: rgba(176, 192, 218, 0.82);
  --line: var(--border-soft);
  --edge: var(--border-strong);
  --faint: rgba(176, 192, 218, 0.38);
  --line2: rgba(178, 201, 235, 0.07);
  --edge-hover: rgba(178, 201, 235, 0.5);
  --accent-text: #9ac2ff;
  --cta: #ffb070;
  --cta-hover: #ffc28d;
  --takeInk: #05070a;
  --takeInk2: #241204;
  --liveWash: rgba(255, 91, 91, 0.12);
  --liveEdge: rgba(255, 91, 91, 0.45);
  --code-bg: rgba(178, 201, 235, 0.08);
  --nav: rgba(4, 5, 7, 0.82);
  --pn-backdrop: rgba(2, 3, 6, 0.9);
  --brand-frame: rgba(154, 194, 255, 0.45);
  --brand-screen: rgba(8, 14, 24, 0.6);
  --live: #ff5b5b;
  --success: #4dc48e;
  --danger: #ef6d74;
  --danger-soft: rgba(239, 109, 116, 0.12);
  --cta-glow: rgba(255, 176, 112, 0.5);
  --live-tint: rgba(255, 91, 91, 0.14);
  --onair-tint: rgba(20, 10, 12, 0.5);
  --mirror-scrim:
    linear-gradient(
      180deg,
      rgba(2, 4, 6, 0) 0%,
      rgba(2, 4, 6, 0.86) 46%);
  --mirror-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.8);
  --color-cta-primary: var(--ai);
  --color-cta-secondary: var(--accent);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-deep: 0 20px 48px rgba(0, 0, 0, 0.48);
  --shadow-brand: 0 0 0 1px rgba(154, 194, 255, 0.12), 0 0 28px rgba(154, 194, 255, 0.1);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --shadow-ai: 0 12px 32px -10px var(--ai-glow);
  --shadow-cold: 0 12px 32px -10px var(--accent-glow);
  --radius-sm: 0.45rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.15rem;
  --radius-xl: 1.5rem;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --font-sans:
    "Bricolage Grotesque",
    "Segoe UI",
    system-ui,
    sans-serif;
  --font-display:
    "Chakra Petch",
    "Bricolage Grotesque",
    system-ui,
    sans-serif;
  --font-mono:
    "JetBrains Mono",
    "Consolas",
    monospace;
  --fs-mono-xs: 0.66rem;
  --fs-mono-sm: 0.72rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.84rem;
  --fs-base: 0.94rem;
  --fs-md: 1.06rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-hero: 4rem;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --ls-mono: 0.16em;
  --ls-mono-w: 0.24em;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --text-5xl: clamp(3rem, 7vw, 5.75rem);
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --container-max: 1200px;
  --app-sidebar-w: 240px;
  --app-topbar-h: 56px;
}
:root[data-theme=light] {
  color-scheme: light;
  --bg-base: #eef1f7;
  --bg-elevated: #ffffff;
  --bg-surface: #f5f7fb;
  --bg-surface-strong: #e7ecf5;
  --bg-panel: #ffffff;
  --bg-panel-strong: rgba(255, 255, 255, 0.96);
  --border-soft: rgba(18, 38, 74, 0.12);
  --border-strong: rgba(18, 38, 74, 0.2);
  --border-accent: rgba(60, 105, 184, 0.4);
  --text-primary: #0c1220;
  --text-secondary: rgba(20, 32, 54, 0.82);
  --text-dim: rgba(50, 66, 94, 0.62);
  --scrollbar-track: rgba(18, 38, 74, 0.05);
  --scrollbar-thumb: rgba(50, 66, 94, 0.28);
  --scrollbar-thumb-hover: rgba(50, 66, 94, 0.45);
  --accent: #3c69b8;
  --accent-cold: #28477e;
  --accent-soft: rgba(60, 105, 184, 0.1);
  --accent-glow: rgba(60, 105, 184, 0.18);
  --accent-rgb:
    60,
    105,
    184;
  --accent-ink: #f4f8ff;
  --ai: #d2791f;
  --ai-soft: rgba(210, 121, 31, 0.12);
  --ai-glow: rgba(210, 121, 31, 0.28);
  --ai-rgb:
    210,
    121,
    31;
  --ai-border: rgba(210, 121, 31, 0.4);
  --faint: rgba(50, 66, 94, 0.72);
  --line2: rgba(18, 38, 74, 0.07);
  --edge-hover: rgba(18, 38, 74, 0.45);
  --accent-text: #33588f;
  --cta: #ffa75e;
  --cta-hover: #f3923f;
  --cta-ink: #241204;
  --muted2: rgba(50, 66, 94, 0.82);
  --takeInk: #05070a;
  --takeInk2: #241204;
  --liveWash: rgba(217, 45, 45, 0.1);
  --liveEdge: rgba(217, 45, 45, 0.45);
  --code-bg: rgba(18, 38, 74, 0.07);
  --nav: rgba(247, 249, 252, 0.85);
  --pn-backdrop: rgba(228, 233, 242, 0.92);
  --brand-frame: rgba(50, 90, 160, 0.55);
  --brand-screen: rgba(10, 16, 28, 0.92);
  --live: #e04848;
  --success: #2e9966;
  --danger: #cc4a52;
  --danger-soft: rgba(204, 74, 82, 0.1);
  --cta-glow: rgba(243, 146, 63, 0.45);
  --live-tint: rgba(217, 45, 45, 0.1);
  --onair-tint: rgba(217, 45, 45, 0.06);
  --mirror-scrim:
    linear-gradient(
      180deg,
      rgba(238, 242, 248, 0) 0%,
      rgba(238, 242, 248, 0.92) 46%);
  --mirror-shadow: 0 18px 44px -14px rgba(24, 44, 80, 0.28);
  --shadow-soft: 0 10px 28px rgba(18, 38, 74, 0.12);
  --shadow-deep: 0 20px 48px rgba(18, 38, 74, 0.16);
  --shadow-brand: 0 0 0 1px rgba(60, 105, 184, 0.16), 0 0 28px rgba(60, 105, 184, 0.1);
  --shadow-sm: 0 2px 8px -2px rgba(18, 38, 74, 0.16);
  --shadow-md: 0 12px 32px -10px rgba(18, 38, 74, 0.18);
  --shadow-lg: 0 30px 80px -30px rgba(18, 38, 74, 0.28);
  --shadow-ai: 0 12px 32px -10px var(--ai-glow);
  --shadow-cold: 0 12px 32px -10px var(--accent-glow);
}
/* Site kit additions */
:root {
  --container-wide: 1600px; /* landing */
  --container: 1320px; /* docs, release notes, portal */
  --cta-text: #ffb070; /* orange text on page grounds */
}
:root[data-theme=light] {
  --cta-text: #9a5410;
}