/* =================================================================== ephemera -- design tokens Palette: clean neutrals with deep indigo accent. Two themes: light (default) and dark. Theme is toggled via `data-theme="light"|"dark"` on . Lives in its own file so "what color is X" is answered by a single short document instead of a search through the layered stylesheets. Loaded via a tag BEFORE base/forms/components/chrome/responsive in every HTML page so :root / [data-theme] values are available wherever they're referenced via var(). =================================================================== */ :root { /* Light theme (default) */ --bg: #fafafa; --surface: #ffffff; --text: #09090b; /* zinc-950 */ --muted: #71717a; /* zinc-500 */ --border: #e4e4e7; /* zinc-200 */ --accent: #4f46e5; /* indigo-600 */ --accent-hover: #4338ca; /* indigo-700 */ --accent-fg: #ffffff; --success: #16a34a; /* green-600 */ --danger: #dc2626; /* red-600 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); /* Spacing scale. 4px base, theme-independent (sits outside the [data-theme] override below since spacing doesn't change between themes). Reach for these instead of literal rem values for any margin / padding / gap. The scale is intentionally short -- if a rule needs something not on the scale, it's almost always a sign that the surrounding spacing is wrong, not that the scale is too coarse. */ --space-0: 0; --space-1: 0.25rem; /* 4px -- hairline gaps, icon-to-text */ --space-2: 0.5rem; /* 8px -- tight inline gaps */ --space-3: 0.75rem; /* 12px -- label-to-input, small-button padding */ --space-4: 1rem; /* 16px -- default block rhythm */ --space-5: 1.5rem; /* 24px -- section-to-section, card padding */ --space-6: 2rem; /* 32px -- major section breaks */ --space-7: 3rem; /* 48px -- hero / above-fold spacing */ } [data-theme="dark"] { --bg: #09090b; /* near-black */ --surface: #18181b; /* zinc-900 */ --text: #fafafa; --muted: #a1a1aa; /* zinc-400 */ --border: #27272a; /* zinc-800 */ --accent: #818cf8; /* indigo-400 */ --accent-hover: #a5b4fc; /* indigo-300 */ --accent-fg: #0b0b10; --success: #4ade80; /* green-400 */ --danger: #f87171; /* red-400 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.6); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }