/* ============================================================ RedKnight — Color Tokens Brand primaries sampled directly from the logo: Red #911A22 · Black #050708 · White #FFFFFF Neutrals are a cool, desaturated "steel" ramp to read as defense / security-grade rather than soft consumer gray. ============================================================ */ :root { /* ---- Brand red (primary action / accent) ---- */ --rk-red-50: #FBEDEE; --rk-red-100: #F3D2D5; --rk-red-200: #E3A1A7; --rk-red-300: #D1727B; --rk-red-400: #B94851; --rk-red-500: #A82832; --rk-red-600: #911A22; /* ← brand red, exact logo value */ --rk-red-700: #76141B; --rk-red-800: #5A0F15; --rk-red-900: #3D0A0E; /* ---- Ink / steel neutrals ---- */ --rk-ink-950: #050708; /* ← brand black, exact logo value */ --rk-ink-900: #0E1114; --rk-ink-800: #181C20; --rk-ink-700: #24292E; --rk-ink-600: #363C42; /* charcoal (helmet wordmark variant) */ --rk-ink-500: #5A6066; --rk-ink-400: #858B91; --rk-ink-300: #AEB3B8; --rk-ink-200: #D2D6D9; --rk-ink-100: #E7EAEC; --rk-ink-50: #F4F5F6; --rk-white: #FFFFFF; /* ---- Cinematic accent (motion / presentation only) ---- The electric "energy field" blue from the brand's video openers. Used for glow, HUD rings and glitch FX in motion and dramatic dark hero art — NOT a UI action color. */ --rk-energy-500: #2C6FE0; --rk-energy-400: #4F8DF0; --rk-energy-300: #7FB0F7; --rk-energy-glow: #BFE0FF; /* ---- Status / signal ---- */ --rk-operational: #2E7D4F; /* secure / online / pass */ --rk-operational-bg: #E6F1EB; --rk-warning: #B8801F; /* elevated / advisory */ --rk-warning-bg: #F8EFD8; --rk-critical: #911A22; /* breach / fail — uses brand red */ --rk-critical-bg: #F7E2E3; --rk-info: #2F6585; /* steel blue — informational */ --rk-info-bg: #E2EDF3; /* ============================================================ Semantic aliases — reference these in product code ============================================================ */ /* Surfaces (default = light theme) */ --surface-page: var(--rk-ink-50); --surface-card: var(--rk-white); --surface-raised: var(--rk-white); --surface-sunken: var(--rk-ink-100); --surface-inverse: var(--rk-ink-950); --surface-brand: var(--rk-red-600); /* Text */ --text-primary: var(--rk-ink-900); --text-secondary: var(--rk-ink-600); --text-muted: var(--rk-ink-400); --text-inverse: var(--rk-white); --text-brand: var(--rk-red-600); --text-on-brand: var(--rk-white); /* Borders / dividers */ --border-subtle: var(--rk-ink-100); --border-default: var(--rk-ink-200); --border-strong: var(--rk-ink-400); --border-brand: var(--rk-red-600); /* Interactive accent */ --accent: var(--rk-red-600); --accent-hover: var(--rk-red-500); --accent-press: var(--rk-red-700); --focus-ring: var(--rk-red-400); } /* ============================================================ Dark / "operations" theme — the native habitat of the brand. Apply data-theme="dark" on a container or . ============================================================ */ [data-theme="dark"] { --surface-page: var(--rk-ink-950); --surface-card: var(--rk-ink-900); --surface-raised: var(--rk-ink-800); --surface-sunken: #03060A; --surface-inverse: var(--rk-white); --surface-brand: var(--rk-red-600); --text-primary: var(--rk-ink-50); --text-secondary: var(--rk-ink-300); --text-muted: var(--rk-ink-500); --text-inverse: var(--rk-ink-950); --text-brand: var(--rk-red-400); --text-on-brand: var(--rk-white); --border-subtle: var(--rk-ink-800); --border-default: var(--rk-ink-700); --border-strong: var(--rk-ink-600); --border-brand: var(--rk-red-500); --accent: var(--rk-red-500); --accent-hover: var(--rk-red-400); --accent-press: var(--rk-red-600); --focus-ring: var(--rk-red-400); }