:root { /* =================================================== COLOR TOKENS =================================================== */ /* Primary blue — one canonical brand color, with predictable light/dark variants for states */ --color-primary: #1b6ec2; --color-primary-50: #eef5ff; --color-primary-100: #ddeeff; --color-primary-300: #4a90e2; --color-primary-700: #1861ac; --color-primary-dark: #084298; --color-link: #0071c1; --color-accent: var(--color-primary-300); /* Success green */ --color-success: #4caf50; --color-success-hover: #45a049; --color-success-text: #2e7d32; --color-success-darker: #0f5132; --color-success-surface: #e8f5e9; /* Danger / error */ --color-danger: #d9534f; /* Neutrals */ --color-bg: #E0FFFF; /* lightcyan equivalent */ --color-surface: #ffffff; --color-surface-alt: #f7f7f7; --color-border: #dcdcdc; --color-border-light: #e0e0e0; --color-text: #212529; --color-text-muted: #5a6573; --color-text-subtle: #888888; --color-warning-surface: #FFFFE0; /* lightyellow equivalent */ /* Backward-compat alias used throughout site.css */ --primary-bg-color: var(--color-bg); /* =================================================== SPACING — 4 px base scale =================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-2_5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ /* =================================================== TYPOGRAPHY =================================================== */ --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ /* =================================================== BORDER RADIUS =================================================== */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; /* =================================================== SHADOWS =================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.10); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.20); --shadow-up: 0 -4px 12px rgba(0, 0, 0, 0.12); /* =================================================== TRANSITIONS =================================================== */ --transition: 0.15s ease; /* =================================================== BREAKPOINTS (documentation — CSS custom properties cannot be used inside @media queries, so these are canonical reference values only. Use the raw px in @media rules and update both together.) --bp-sm: 400px (very small phones) --bp-md: 600px (small phones) --bp-lg: 768px (tablets / large phones) =================================================== */ } /* ===================================================== DARK MODE — overrides only the tokens that change. Driven by [data-theme="dark"] on (set by JS from prefers-color-scheme and the manual toggle). Primary / accent colors stay per-owner so brand stays consistent in dark mode. ===================================================== */ :root[data-theme="dark"] { /* Backgrounds & surfaces */ --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-alt: #263348; --color-warning-surface: #2a2000; /* Borders */ --color-border: #334155; --color-border-light: #3d4f66; /* Text */ --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-link: #60a5fa; /* Success variants that use light surfaces */ --color-success-text: #86efac; --color-success-surface: #052e16; /* Primary-tinted surfaces (used for focused inputs, badges) */ --color-primary-50: #0c1628; --color-primary-100: #162030; }