/* * Design tokens. Dark mode is driven by a `data-theme` attribute on * (set by inc/dark-mode.php before first paint to avoid a flash of the * wrong theme), falling back to the OS preference when no explicit choice * has been stored yet. */ :root { --epia-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --epia-font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --epia-radius-sm: 6px; --epia-radius-md: 10px; --epia-radius-lg: 16px; --epia-radius-xl: 24px; --epia-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --epia-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06); --epia-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10); --epia-bg: #ffffff; --epia-surface: #ffffff; --epia-surface-raised: #ffffff; --epia-text: #0f172a; --epia-text-secondary: #64748b; --epia-border: #e6e8ec; --epia-primary: #4338ca; --epia-primary-hover: #3730a3; --epia-primary-contrast: #ffffff; --epia-accent: #0f766e; --epia-success: #15803d; --epia-warning: #b45309; --epia-danger: #b91c1c; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --epia-bg: #0a0a0c; --epia-surface: #131418; --epia-surface-raised: #191b21; --epia-text: #f1f2f4; --epia-text-secondary: #9ba1ab; --epia-border: #242630; --epia-primary: #818cf8; --epia-primary-hover: #a5b4fc; --epia-primary-contrast: #0a0a0c; --epia-accent: #2dd4bf; --epia-success: #4ade80; --epia-warning: #fbbf24; --epia-danger: #f87171; --epia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --epia-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --epia-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --epia-bg: #0a0a0c; --epia-surface: #131418; --epia-surface-raised: #191b21; --epia-text: #f1f2f4; --epia-text-secondary: #9ba1ab; --epia-border: #242630; --epia-primary: #818cf8; --epia-primary-hover: #a5b4fc; --epia-primary-contrast: #0a0a0c; --epia-accent: #2dd4bf; --epia-success: #4ade80; --epia-warning: #fbbf24; --epia-danger: #f87171; --epia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --epia-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --epia-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); }