/* * THEME VARIABLES * Activation: set data-theme="dark" on and persist in localStorage. * * Init (paste before to avoid flash): * * * Toggle: * var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; * document.documentElement.setAttribute('data-theme', next); * localStorage.setItem('theme', next); */ /* ─── Primitive palette ─────────────────────────────────────────────────── */ :root { --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #ea6c0a; --orange-700: #c2560a; --orange-800: #9a3f07; --orange-900: #7c3008; --gray-50: #f7f8f7; --gray-100: #eeeeed; --gray-200: #dededc; --gray-300: #c4c4c2; --gray-400: #9a9a97; --gray-500: #6b6b68; --gray-600: #4a4a48; --gray-700: #333331; --gray-800: #1f1f1e; --gray-850: #181817; --gray-900: #111110; --gray-950: #0a0a09; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --yellow-400: #facc15; --yellow-500: #eab308; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; } /* ─── Light mode (default) ──────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg-page: var(--gray-50); --bg-surface: #ffffff; --bg-surface-raised: #ffffff; --bg-surface-sunken: var(--gray-100); --bg-overlay: rgba(0, 0, 0, 0.45); --bg-hero: rgba(0, 0, 0, 0.35); /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-400); --text-inverted: #ffffff; --text-on-primary: #ffffff; --text-disabled: var(--gray-300); /* Brand / primary */ --primary: var(--orange-500); --primary-hover: var(--orange-600); --primary-active: var(--orange-700); --primary-subtle: var(--orange-50); --primary-border: var(--orange-200); /* Links */ --link: var(--orange-500); --link-hover: var(--orange-600); --link-visited: var(--orange-700); /* Borders */ --border-subtle: var(--gray-100); --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--orange-400); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.11); --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.14); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Inputs */ --input-bg: #ffffff; --input-border: var(--gray-300); --input-border-focus: var(--orange-400); --input-placeholder: var(--gray-400); --input-text: var(--gray-900); /* Navigation */ --nav-bg: #ffffff; --nav-border: var(--gray-200); --nav-text: var(--gray-700); --nav-text-hover: var(--orange-500); --nav-text-active: var(--orange-600); /* Cards */ --card-bg: #ffffff; --card-border: var(--gray-200); --card-shadow: var(--shadow-md); /* Badges */ --badge-promo-bg: #ef4444; --badge-promo-text: #ffffff; --badge-stock-bg: var(--orange-500); --badge-stock-text: #ffffff; --badge-premium-bg: var(--gray-900); --badge-premium-text: #ffffff; --badge-cat-bg: var(--gray-100); --badge-cat-text: var(--gray-700); /* Status */ --status-success-bg: #f0faf4; --status-success-text: #156137; --status-success-border: #a8dfc0; --status-danger-bg: #fef2f2; --status-danger-text: var(--red-600); --status-danger-border: #fecaca; --status-warning-bg: #fefce8; --status-warning-text: #92400e; --status-warning-border: #fde68a; --status-info-bg: #eff6ff; --status-info-text: var(--blue-600); --status-info-border: #bfdbfe; /* Price */ --price-current: var(--gray-900); --price-old: var(--gray-400); --price-promo: var(--red-600); /* Footer */ --footer-bg: var(--gray-100); --footer-border: var(--gray-200); --footer-text: var(--gray-600); --footer-text-muted: var(--gray-400); --footer-link: var(--gray-600); --footer-link-hover: var(--orange-500); } /* ─── Dark mode ─────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Backgrounds */ --bg-page: var(--gray-950); --bg-surface: var(--gray-900); --bg-surface-raised: var(--gray-850); --bg-surface-sunken: #060605; --bg-overlay: rgba(0, 0, 0, 0.65); --bg-hero: rgba(0, 0, 0, 0.55); /* Text */ --text-primary: #f0f0ee; --text-secondary: var(--gray-400); --text-muted: var(--gray-600); --text-inverted: var(--gray-900); --text-on-primary: #ffffff; --text-disabled: var(--gray-700); /* Brand / primary */ --primary: var(--orange-400); --primary-hover: var(--orange-300); --primary-active: var(--orange-200); --primary-subtle: rgba(249, 115, 22, 0.15); --primary-border: rgba(249, 115, 22, 0.35); /* Links */ --link: var(--orange-400); --link-hover: var(--orange-300); --link-visited: var(--orange-400); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: var(--orange-400); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.70); --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.85); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.40); /* Inputs */ --input-bg: var(--gray-850); --input-border: rgba(255, 255, 255, 0.12); --input-border-focus: var(--orange-400); --input-placeholder: var(--gray-600); --input-text: #f0f0ee; /* Navigation */ --nav-bg: var(--gray-900); --nav-border: rgba(255, 255, 255, 0.08); --nav-text: var(--gray-300); --nav-text-hover: var(--orange-400); --nav-text-active: var(--orange-300); /* Cards */ --card-bg: var(--gray-850); --card-border: rgba(255, 255, 255, 0.08); --card-shadow: var(--shadow-md); /* Badges */ --badge-promo-bg: var(--red-500); --badge-promo-text: #ffffff; --badge-stock-bg: var(--orange-600); --badge-stock-text: #ffffff; --badge-premium-bg: var(--orange-700); --badge-premium-text: #ffffff; --badge-cat-bg: rgba(255, 255, 255, 0.08); --badge-cat-text: var(--gray-300); /* Status */ --status-success-bg: rgba(21, 97, 55, 0.15); --status-success-text: #6ec49a; --status-success-border: rgba(21, 97, 55, 0.30); --status-danger-bg: rgba(239, 68, 68, 0.15); --status-danger-text: var(--red-400); --status-danger-border: rgba(239, 68, 68, 0.30); --status-warning-bg: rgba(234, 179, 8, 0.15); --status-warning-text: var(--yellow-400); --status-warning-border: rgba(234, 179, 8, 0.30); --status-info-bg: rgba(59, 130, 246, 0.15); --status-info-text: var(--blue-400); --status-info-border: rgba(59, 130, 246, 0.30); /* Price */ --price-current: #f0f0ee; --price-old: var(--gray-600); --price-promo: var(--red-400); /* Footer */ --footer-bg: var(--gray-900); --footer-border: rgba(255, 255, 255, 0.08); --footer-text: var(--gray-400); --footer-text-muted: var(--gray-600); --footer-link: var(--gray-400); --footer-link-hover: var(--orange-400); }