/* ==================== DESIGN TOKENS ==================== Centralized theme variables. Toggle dark mode via [data-theme="dark"] on . */ :root { /* Brand colors */ --primary-color: #f89343; --primary-dark: #e67a2a; --secondary-color: #0f172a; --accent-color: #ffa95f; /* Text & surfaces (light theme) */ --text-color: #1e293b; --text-light: #64748b; --bg-color: #ffffff; --bg-light: #f8fafc; --bg-dark: #0f172a; --card-bg: #ffffff; --border-color: #e2e8f0; --shadow: rgba(15, 23, 42, 0.08); --shadow-strong: rgba(15, 23, 42, 0.16); --navbar-bg: rgba(255, 255, 255, 0.9); --overlay-bg: rgba(15, 23, 42, 0.75); /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --section-padding: 6rem 0; --container-padding: 0 20px; /* Radii & transitions */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --transition: all 0.3s ease; --transition-fast: all 0.18s ease; /* Typography */ --font-family: 'Poppins', sans-serif; } /* ==================== DARK THEME ==================== */ [data-theme="dark"] { --text-color: #e2e8f0; --text-light: #94a3b8; --bg-color: #0b1220; --bg-light: #111a2e; --bg-dark: #060a14; --card-bg: #131e33; --border-color: #22314f; --shadow: rgba(0, 0, 0, 0.35); --shadow-strong: rgba(0, 0, 0, 0.55); --navbar-bg: rgba(11, 18, 32, 0.85); --overlay-bg: rgba(6, 10, 20, 0.85); --secondary-color: #f1f5f9; }