/* ============================================================ KOTH — tokens.css · "CONSOLE" — enterprise security dashboard ------------------------------------------------------------ Calm, data-first, dark by default. Neutral graphite surfaces carry the UI; a single restrained red marks the king, alerts, live state and the one primary action. All-sans type; mono is reserved for literal machine data (IPs, flags, tokens, timers). Slightly-rounded (6px) panels, hairline borders, flat depth. Token NAMES are preserved so every inline `var(--x)` across the markup re-themes for free — only the VALUES change here. The base :root is the LIGHT palette; [data-theme="dark"] holds dark. A tiny inline script selects dark by default. ============================================================ */ :root { /* — Surfaces (light) — */ --black: #f5f6f8; /* app background */ --surface: #eceef1; /* wells, inputs, avatar backs */ --card: #ffffff; /* panels */ --card-hv: #f4f6f8; /* row / panel hover */ --paper: #ffffff; /* nav, bars */ --paper-2: #ffffff; /* inputs, modals */ /* — Borders / rules (hairline) — */ --border: rgba(16,20,26,0.10); --border2: rgba(16,20,26,0.16); --rule: rgba(16,20,26,0.12); /* — Ink / text — */ --text: #12151a; --sub: #565d68; --muted: #8b929d; /* — The one accent: a controlled red (deeper on light for contrast) — */ --red: #d31c33; --accent: #d31c33; --accent-hover: #b0152a; --accent-ink: #ffffff; --red-dim: rgba(211,28,51,0.08); --red-bright: #d31c33; /* — Functional states (muted, status-only) — */ --green: #1f9d52; --green-bright: #1f9d52; --cyan: #0e7f96; --amber: #b7791f; --amber-bright: #b7791f; --purple: #6d47c9; /* — Type: Helvetica (the landing typeface), platform-wide. Mono only for literal machine data. No web-font load, so it stays CSP-safe. — */ --display: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Roboto, sans-serif; --sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Roboto, sans-serif; --body: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace; /* — Shape: slightly rounded, crisp — */ --radius: 6px; --radius-sm: 5px; --radius-lg: 8px; --transition: 130ms cubic-bezier(.2,0,0,1); /* — Depth (flat; borders do the work) — */ --shadow-sm: 0 1px 2px rgba(16,20,26,0.04); --shadow: 0 1px 3px rgba(16,20,26,0.05), 0 6px 16px rgba(16,20,26,0.05); --shadow-lg: 0 20px 48px rgba(16,20,26,0.16); --ring: 0 0 0 3px rgba(211,28,51,0.16); --grid: transparent; /* — Rhythm (dense) — */ --gap: 16px; --gap-lg: 28px; --shell: 1200px; } /* ── Dark theme (DEFAULT — selected by the inline bootstrap script) ── */ :root[data-theme="dark"] { --black: #0c0e11; /* app background (graphite-black) */ --surface: #171a1f; /* wells, inputs */ --card: #14171b; /* panels */ --card-hv: #1b1f25; /* hover */ --paper: #0f1217; /* nav, bars */ --paper-2: #171a1f; /* inputs, modals */ --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14); --rule: rgba(255,255,255,0.10); --text: #e7e9ee; --sub: #99a0ab; --muted: #5f6672; --red: #e83a4d; --accent: #e83a4d; --accent-hover: #cf2c3f; --accent-ink: #ffffff; --red-dim: rgba(232,58,77,0.13); --red-bright: #e83a4d; --green: #35b96a; --green-bright: #3fca75; --cyan: #35b6c9; --amber: #d9a02a; --amber-bright: #e6b23f; --purple: #a78bfa; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 2px 6px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.36); --shadow-lg: 0 24px 60px rgba(0,0,0,0.6); --ring: 0 0 0 3px rgba(232,58,77,0.22); --grid: transparent; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--body); background-color: var(--black); color: var(--text); min-height: 100vh; line-height: 1.5; letter-spacing: -0.005em; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; } ::selection { background: var(--accent); color: #fff; } /* ── Scrollbar (subtle) ── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); border: 3px solid transparent; background-clip: padding-box; }