/* ============================================================ DendronAI — Colour tokens Brand core (from the official brand sheet): Ink #080528, Electric Blue #3165F3, White #FFFFFF. Blue is the single brand/action accent everywhere. Green/amber/red are RESERVED for console status only — never decorative — because DendronAI is a security product. ============================================================ */ :root { /* ---- Brand core ---- */ --nth-ink: #080528; /* brand navy / deepest surface */ --nth-blue: #3165f3; /* brand electric blue */ --nth-white: #ffffff; /* ---- Ink ramp (navy-tinted neutrals) ---- */ --ink-950: #080528; --ink-900: #0e0b33; --ink-850: #141140; --ink-800: #1c1a4d; --ink-700: #2e2b5c; --ink-600: #454172; --ink-500: #635f8c; --ink-400: #8b88ab; --ink-300: #b4b2cb; --ink-200: #d6d5e2; --ink-150: #e6e5ef; --ink-100: #eae9f1; --ink-50: #f5f5f9; --white: #ffffff; /* ---- Blue ramp ---- */ --blue-700: #1733a8; --blue-600: #1e40d4; /* pressed / hover-dark */ --blue-500: #3165f3; /* brand */ --blue-400: #5a83f6; /* accent on dark surfaces */ --blue-300: #9db4fa; --blue-100: #e4ebfe; --blue-50: #f1f5ff; /* ---- Status: healthy (emerald) ---- */ --green-600: #12915a; --green-500: #17b26a; --green-bright: #3fd28b; /* bright for dark UI */ --green-100: #d8f3e5; /* ---- Status: warning (amber) ---- */ --amber-500: #e0b341; --amber-600: #b98c1e; --amber-100: #f8ecc9; /* ---- Status: critical (red) ---- */ --red-500: #e0614d; --red-600: #c63c27; --red-100: #f9dcd6; /* ============================================================ Semantic aliases — LIGHT theme (default) ============================================================ */ --bg: #ffffff; --bg-sunken: #f5f5f9; --surface: #ffffff; --surface-2: #f5f5f9; --panel: #ffffff; --border: #e6e5ef; --border-strong: #d6d5e2; --text: #080528; --text-secondary: #454172; --text-muted: #635f8c; --text-faint: #8b88ab; --accent: #3165f3; --accent-hover: #1e40d4; --accent-tint: #f1f5ff; --on-accent: #ffffff; --success: #17b26a; --success-tint: #d8f3e5; --warning: #b98c1e; --warning-tint: #f8ecc9; --critical: #c63c27; --critical-tint: #f9dcd6; --info: #3165f3; --info-tint: #f1f5ff; --ring: rgba(49, 101, 243, 0.35); } /* ============================================================ Semantic aliases — DARK theme Navy IS the brand's dark surface; blue stays the accent. Apply with or class .theme-dark. ============================================================ */ [data-theme="dark"], .theme-dark { --bg: #080528; --bg-sunken: #05041c; --surface: #0e0b33; --surface-2: #141140; --panel: #0e0b33; --border: #221f4a; --border-strong: #2e2b5c; --text: #f5f5f9; --text-secondary: #b4b2cb; --text-muted: #8b88ab; --text-faint: #635f8c; --accent: #5a83f6; --accent-hover: #7f9ff9; --accent-tint: rgba(49, 101, 243, 0.14); --on-accent: #ffffff; --success: #3fd28b; --success-tint: rgba(63, 210, 139, 0.12); --warning: #e0b341; --warning-tint: rgba(224, 179, 65, 0.12); --critical: #e0614d; --critical-tint: rgba(224, 97, 77, 0.12); --info: #5a83f6; --info-tint: rgba(90, 131, 246, 0.14); --ring: rgba(90, 131, 246, 0.45); }