/* ============================================================================ KYBERS.CA - DESIGN SYSTEM TOKENS Dark is the default. html.dark = dark mode, html.light = light mode. No raw hex values anywhere else in the codebase - only these CSS variables. ============================================================================ */ /* ── Brand scale (shared) ──────────────────────────────────────────────── */ :root { --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #3d6ef5; --brand-600: #1a3fd4; --brand-700: #1533b0; --brand-800: #10278a; --brand-900: #060d1a; /* ── Semantic: status ─────────────────────────────────────────────────── */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; /* ── Always-white (text on colored backgrounds: buttons, avatars) ──────── */ --text-on-primary: #ffffff; /* ── Shadow scale ─────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.18); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.28); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.38); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.48); --shadow-hover: 0 20px 40px rgba(0,0,0,0.55); /* Primary button glow - dark mode. ::before opacity animates; box-shadow is static. */ --glow-btn-active-glow: 0 0 24px 0px rgba(61,110,245,0.60), 0 0 48px 0px rgba(61,110,245,0.28); --glow-btn-hover: 0 0 0 1px rgba(61,110,245,0.45), 0 8px 32px rgba(61,110,245,0.55), 0 0 0 5px rgba(61,110,245,0.09); --primary-inactive: rgba(61,110,245,0.42); --glow-btn-inactive-peak: 0 0 36px 0px rgba(61,110,245,0.75), 0 0 70px 0px rgba(61,110,245,0.38); } /* ============================================================================ DARK MODE - default (:root) Applied by: set before first paint in script.js ============================================================================ */ :root, html.dark { /* Backgrounds */ --bg-primary: #060d1a; --bg-surface: #0e1a32; /* Brand accent */ --primary: #3d6ef5; --primary-hover:#5b83f7; /* Text */ --text-primary: #f0f4ff; --text-dim: #a8b8d8; /* Border */ --border: rgba(255,255,255,0.08); /* Gradient */ --gradient-angle: 135deg; --gradient-start: #060d1a; --gradient-end: #1a3fd4; /* Fonts */ --font-ui: 'DM Sans', sans-serif; --font-data: 'JetBrains Mono', monospace; /* Typography scale */ --text-overline: 10px; --text-h1: clamp(2rem, 4vw, 3.5rem); --text-h2: clamp(1.6rem, 2.5vw, 2.75rem); --text-body: 0.9375rem; --text-caption: 0.6875rem; --text-stat: 1.375rem; --text-stat-label: 0.6875rem; /* Spacing / radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* Overlays */ --overlay: rgba(255,255,255,0.05); --overlay-hover: rgba(255,255,255,0.10); /* Navbar */ --navbar-glass-bg: rgba(6,13,26,0.52); --navbar-glass-border: rgba(255,255,255,0.09); /* Hero rings */ --ring-fill: rgba(61,110,245,0.10); --ring-border: var(--primary); /* Hero background gradient + glow */ --hero-gradient: linear-gradient(149deg, #060d1a 15%, #1d4ed8 85%); --hero-glow-color: rgba(29,78,216,0.52); /* Section alternate surface */ --bg-alt: #0b1526; /* Section ambient backgrounds */ --section-dot: rgba(190,205,225,0.13); /* silver - visible in dark mode */ --section-orb: rgba(61,110,245,0.24); } /* ============================================================================ LIGHT MODE Applied by: html.light ============================================================================ */ html.light { /* Backgrounds */ --bg-primary: #ffffff; --bg-surface: #f2f5fd; /* Brand accent */ --primary: #1a3fd4; --primary-hover:#1533b0; /* Text */ --text-primary: #0a1020; --text-dim: #475778; /* Border */ --border: rgba(0,0,0,0.08); /* Gradient */ --gradient-start: #f2f5fd; --gradient-end: #dde6fb; /* Overlays */ --overlay: rgba(0,0,0,0.04); --overlay-hover: rgba(0,0,0,0.08); /* Navbar */ --navbar-glass-bg: rgba(220,230,255,0.55); --navbar-glass-border: rgba(61,110,245,0.12); /* Shadow adjustments for light bg */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.12); --shadow-hover: 0 20px 40px rgba(0,0,0,0.12); /* Primary button glow - light mode. ::before opacity animates; box-shadow is static. */ --glow-btn-active-glow: 0 0 20px 0px rgba(26,63,212,0.50), 0 0 40px 0px rgba(26,63,212,0.22); --glow-btn-hover: 0 0 0 1px rgba(26,63,212,0.35), 0 6px 26px rgba(26,63,212,0.35), 0 0 0 5px rgba(26,63,212,0.07); --primary-inactive: rgba(26,63,212,0.40); --glow-btn-inactive-peak: 0 0 28px 0px rgba(26,63,212,0.60), 0 0 58px 0px rgba(26,63,212,0.28); /* Hero rings */ --ring-fill: rgba(26,63,212,0.06); --ring-border: var(--primary); /* Hero background gradient + glow */ --hero-gradient: linear-gradient(149deg, #f2f5fd 15%, #c7d9fc 85%); --hero-glow-color: rgba(26,63,212,0.14); /* Section alternate surface */ --bg-alt: #edf1fc; /* Section ambient backgrounds */ --section-dot: rgba(61,110,245,0.32); --section-orb: rgba(61,110,245,0.38); }