/* nouter design tokens — ported from the portal gateway (index.html @ 3459f08), plan/06 §2.1. Dark is the default palette on :root; light redefines the SAME tokens under :root[data-theme="light"], which the head script stamps on before first paint. Rule: every colour in app.css goes through a token here. A literal would keep its value across themes and be wrong in one of them. Need a new wash? Add it to BOTH blocks. */ :root { color-scheme: dark; --bg: #0b0d14; --bg-2: #10131d; --glass: rgba(255, 255, 255, 0.06); --glass-strong: rgba(255, 255, 255, 0.09); --border: rgba(255, 255, 255, 0.12); --border-soft: rgba(255, 255, 255, 0.07); --text: #eef0f6; --text-dim: #9aa1b5; --text-faint: #7e8498; --accent: #7c6cff; --accent-deep: #5b3df5; --accent-2: #4ecbff; --accent-3: #d946ef; --danger: #ff6b8a; --warn: #fbbf24; --ok: #4ade80; --on-accent: #ffffff; /* the primary button's lighter stop: white text on --accent was 3.86:1 */ --btn-primary-a: #7062e6; /* Washes: white-on-ink overlays; the light theme flips them to ink-on-white. */ --surface-1: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.11); --surface-3: rgba(255, 255, 255, 0.035); --row-hover: rgba(255, 255, 255, 0.025); --track: rgba(255, 255, 255, 0.08); --shimmer: rgba(255, 255, 255, 0.08); --sunken: rgba(0, 0, 0, 0.25); --sunken-soft: rgba(0, 0, 0, 0.2); --sunken-strong: rgba(0, 0, 0, 0.35); --grid-line: rgba(255, 255, 255, 0.07); --scrim: rgba(0, 0, 0, 0.55); --scrim-strong: rgba(0, 0, 0, 0.6); /* Tints for pills / callouts / buttons (bg + border). */ --tint-ok: rgba(74, 222, 128, 0.08); --tint-ok-border: rgba(74, 222, 128, 0.35); --tint-warn: rgba(251, 191, 36, 0.08); --tint-warn-border: rgba(251, 191, 36, 0.4); --tint-danger: rgba(255, 107, 138, 0.08); --tint-danger-border: rgba(255, 107, 138, 0.4); --tint-danger-hover: rgba(255, 107, 138, 0.18); --tint-accent: rgba(124, 108, 255, 0.12); --tint-accent-strong: rgba(124, 108, 255, 0.22); --tint-accent-border: rgba(124, 108, 255, 0.4); --tint-cyan: rgba(78, 203, 255, 0.1); --tint-cyan-border: rgba(78, 203, 255, 0.3); --focus-ring: rgba(124, 108, 255, 0.35); --focus-border: rgba(124, 108, 255, 0.6); /* Chrome */ --sidebar-bg: rgba(12, 14, 22, 0.72); --topbar-bg: rgba(11, 13, 20, 0.6); --tooltip-bg: rgba(16, 19, 29, 0.95); --toast-bg: rgba(20, 22, 34, 0.9); --option-bg: #141724; --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35), 0 0 90px rgba(124, 108, 255, 0.08); --shadow-pop: 0 12px 34px rgba(0, 0, 0, 0.45); --shadow-primary: 0 10px 28px rgba(124, 108, 255, 0.35); --shadow-primary-hover: 0 14px 34px rgba(124, 108, 255, 0.5); --shadow-avatar: 0 8px 22px rgba(124, 108, 255, 0.4); --blob-op: 0.38; --blob-1: #5b3df5; --blob-2: #0ea5e9; --blob-3: #d946ef; --logo-glow: drop-shadow(0 8px 24px rgba(78, 203, 255, 0.25)); /* Ink on tinted surfaces — pills, callouts, toasts, links */ --ink-ok: #b5f0cb; --ink-warn: #fde68a; --ink-danger: #ffb3c4; --ink-accent: #cfc8ff; --ink-cyan: #c9ecff; --ink-link: #4ecbff; --code-ink: #cfd6e6; /* Gradients for meters */ --meter-ok-a: var(--accent); --meter-ok-b: var(--accent-2); --meter-warn-a: #f59e0b; --meter-warn-b: #fbbf24; --meter-danger-a: #ef4444; --meter-danger-b: #ff6b8a; --bar-grad-a: #8f82ff; --bar-grad-b: #4ecbff; --fail-grad-a: #ff6b8a; --fail-grad-b: #ff9fb3; /* nouter additions (plan/06 §2.1): quota markers and route colours (teamclaude TUI). */ --quota-threshold: rgba(251, 191, 36, 0.95); --quota-cap: rgba(255, 107, 138, 0.95); --route-red: #fb7185; --route-green: #4ade80; --route-yellow: #fbbf24; --route-blue: #60a5fa; --route-magenta: #e879f9; --route-cyan: #4ecbff; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --sidebar-w: 248px; --mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace; --sans: "Segoe UI", system-ui, -apple-system, sans-serif; } :root[data-theme="light"] { color-scheme: light; --bg: #eef1f7; --bg-2: #ffffff; --glass: rgba(255, 255, 255, 0.78); --glass-strong: rgba(255, 255, 255, 0.92); --border: rgba(19, 26, 48, 0.14); --border-soft: rgba(19, 26, 48, 0.09); --text: #171b2b; --text-dim: #58607a; --text-faint: #6c7385; --accent: #6355f0; --accent-deep: #4c3fd6; --btn-primary-a: #6355f0; --accent-2: #0ea5e9; --danger: #e11d48; --surface-1: rgba(19, 26, 48, 0.05); --surface-2: rgba(19, 26, 48, 0.1); --surface-3: rgba(19, 26, 48, 0.03); --row-hover: rgba(19, 26, 48, 0.03); --track: rgba(19, 26, 48, 0.1); --shimmer: rgba(255, 255, 255, 0.65); --sunken: rgba(19, 26, 48, 0.04); --sunken-soft: rgba(19, 26, 48, 0.03); --sunken-strong: rgba(19, 26, 48, 0.06); --grid-line: rgba(19, 26, 48, 0.1); --scrim: rgba(19, 26, 48, 0.35); --scrim-strong: rgba(19, 26, 48, 0.45); --tint-ok: rgba(21, 128, 61, 0.08); --tint-ok-border: rgba(21, 128, 61, 0.3); --tint-warn: rgba(180, 83, 9, 0.08); --tint-warn-border: rgba(180, 83, 9, 0.32); --tint-danger: rgba(190, 18, 60, 0.07); --tint-danger-border: rgba(190, 18, 60, 0.3); --tint-danger-hover: rgba(190, 18, 60, 0.14); --tint-accent: rgba(99, 85, 240, 0.1); --tint-accent-strong: rgba(99, 85, 240, 0.18); --tint-accent-border: rgba(99, 85, 240, 0.35); --tint-cyan: rgba(3, 105, 161, 0.08); --tint-cyan-border: rgba(3, 105, 161, 0.28); --focus-ring: rgba(99, 85, 240, 0.22); --focus-border: rgba(99, 85, 240, 0.6); --sidebar-bg: rgba(255, 255, 255, 0.8); --topbar-bg: rgba(238, 241, 247, 0.78); --tooltip-bg: rgba(255, 255, 255, 0.97); --toast-bg: rgba(255, 255, 255, 0.95); --option-bg: #ffffff; --shadow-card: 0 18px 44px rgba(19, 26, 48, 0.1), 0 2px 8px rgba(19, 26, 48, 0.05); --shadow-pop: 0 12px 34px rgba(19, 26, 48, 0.18); --shadow-primary: 0 10px 24px rgba(99, 85, 240, 0.28); --shadow-primary-hover: 0 14px 30px rgba(99, 85, 240, 0.38); --shadow-avatar: 0 8px 20px rgba(99, 85, 240, 0.3); --blob-op: 0.16; --logo-glow: none; --ink-ok: #147c3b; --ink-warn: #af5109; --ink-danger: #be123c; --ink-accent: #4c3fd6; --ink-cyan: #0369a1; --ink-link: #0e7490; --code-ink: #2c3346; --meter-warn-a: #d97706; --meter-warn-b: #f59e0b; --meter-danger-a: #dc2626; --meter-danger-b: #e11d48; --bar-grad-a: #6355f0; --bar-grad-b: #0ea5e9; --fail-grad-a: #e11d48; --fail-grad-b: #fb7185; --quota-threshold: #b45309; --quota-cap: #be123c; --route-red: #e11d48; --route-green: #15803d; --route-yellow: #b45309; --route-blue: #1d4ed8; --route-magenta: #a21caf; --route-cyan: #0369a1; }