/* ============================================================================= Nexus Horizon — Colour Tokens Portal and discovery surfaces: the main Nexus entry point that lists and launches downstream applications. Usage: link this BEFORE nexus-horizon.css in _Host.cshtml. Set data-theme="dark" or data-theme="light" on . Dark is the default when no attribute is present. Theme toggled by theme-toggle.js → NexusTheme.toggle() ============================================================================= */ /* ── Dark (default) ─────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* Backgrounds */ --nh-bg: #0c1114; --nh-bg-raised: #121a20; --nh-bg-overlay: #18242d; --nh-nav-bg: rgba(12, 17, 20, 0.92); --nh-panel: rgba(18, 26, 32, 0.86); --nh-panel-hover: rgba(24, 36, 45, 0.96); /* Borders */ --nh-border: rgba(6, 79, 118, 0.18); --nh-border-focus: rgba(6, 79, 118, 0.46); /* Text */ --nh-text: #f0f3f5; --nh-text-muted: #b8c0c5; --nh-text-dim: #717e88; --nh-text-on-accent: #f7fbfd; /* Accent — I161 primary blue */ --nh-accent: #064f76; --nh-accent-hover: #0a6a9d; --nh-accent-dim: rgba(6, 79, 118, 0.13); /* Signal — I161 secondary gray */ --nh-signal: #636466; --nh-signal-dim: rgba(99, 100, 102, 0.14); /* Semantic status */ --nh-ok: #34d399; --nh-warn: #fbbf24; --nh-error: #f87171; --nh-info: #60a5fa; --nh-ok-bg: rgba(52, 211, 153, 0.10); --nh-warn-bg: rgba(251, 191, 36, 0.10); --nh-error-bg: rgba(248, 113, 113, 0.10); --nh-info-bg: rgba(96, 165, 250, 0.10); /* Shadows */ --nh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.50); --nh-shadow: 0 8px 40px rgba(0, 0, 0, 0.65); --nh-shadow-lg: 0 32px 96px rgba(0, 0, 0, 0.75); /* Hero gradient */ --nh-body-bg: radial-gradient(ellipse at 18% 55%, rgba(6, 79, 118, 0.16) 0%, transparent 52%), radial-gradient(ellipse at 82% 18%, rgba(99, 100, 102, 0.12) 0%, transparent 44%), linear-gradient(170deg, #0b0f12 0%, #121a20 60%, #18242d 100%); } /* ── Light ──────────────────────────────────────────────────────────────────── */ [data-theme="light"] { --nh-bg: #fafafa; --nh-bg-raised: #ffffff; --nh-bg-overlay: #f1f4f6; --nh-nav-bg: rgba(250, 250, 250, 0.94); --nh-panel: rgba(255, 255, 255, 0.90); --nh-panel-hover: rgba(255, 255, 255, 0.99); --nh-border: rgba(6, 79, 118, 0.16); --nh-border-focus: rgba(6, 79, 118, 0.44); --nh-text: #111b22; --nh-text-muted: #56646d; --nh-text-dim: #939ca2; --nh-text-on-accent: #ffffff; --nh-accent: #064f76; --nh-accent-hover: #0a6a9d; --nh-accent-dim: rgba(6, 79, 118, 0.08); --nh-signal: #636466; --nh-signal-dim: rgba(99, 100, 102, 0.08); --nh-ok: #059669; --nh-warn: #d97706; --nh-error: #dc2626; --nh-info: #2563eb; --nh-ok-bg: rgba(5, 150, 105, 0.08); --nh-warn-bg: rgba(217, 119, 6, 0.08); --nh-error-bg: rgba(220, 38, 38, 0.08); --nh-info-bg: rgba(37, 99, 235, 0.08); --nh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --nh-shadow: 0 8px 40px rgba(0, 0, 0, 0.10); --nh-shadow-lg: 0 32px 96px rgba(0, 0, 0, 0.14); --nh-body-bg: radial-gradient(ellipse at 18% 55%, rgba(6, 79, 118, 0.07) 0%, transparent 52%), #fafafa; }