/* ============================================================================
Omniposter design tokens — SINGLE SOURCE OF TRUTH for the app + marketing site.
Served at /marketing-static/css/tokens.css (shared mount). Consumed by:
- ui/index.html (admin SPA — via + inline tailwind.config)
- marketing/templates/* (marketing site — via + site.css)
Theming: values are space-separated RGB triplets so they compose with
Tailwind's "/" syntax, e.g. bg-surface/60 →
rgb(var(--surface) / 0.6). Toggle by setting data-theme="dark" on .
Light is the default (:root); dark overrides under [data-theme="dark"].
========================================================================== */
:root {
/* ── Neutrals / surfaces (LIGHT) ─────────────────────────────────────── */
--bg: 241 244 249; /* page background — soft cool off-white (not pure white) so white cards/panels lift off it */
--surface: 255 255 255; /* cards, header, panels */
--elevated: 255 255 255; /* dropdowns, modals */
--border: 224 229 237; /* hairline borders (a touch stronger for definition on the tinted bg) */
--border-strong: 203 213 225; /* hover / emphasis edge */
--fg: 15 23 42; /* primary text */
--fg-soft: 51 65 85; /* secondary text */
--muted: 100 116 139; /* tertiary / muted text */
/* ── Brand accent (gold) ─────────────────────────────────────────────── */
--accent: 202 138 4; /* fills, active states (gold-600 reads on white) */
--accent-strong: 161 98 7; /* hover */
--accent-fg: 15 23 42; /* text/icon ON accent fill (always dark) */
/* ── Semantic state colors ───────────────────────────────────────────── */
--success: 5 150 105; /* emerald-600 */
--warning: 180 83 9; /* amber-700 */
--danger: 220 38 38; /* red-600 */
--info: 37 99 235; /* blue-600 */
/* ── Focus ring ──────────────────────────────────────────────────────── */
--ring: 202 138 4;
/* ── Elevation ───────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
--shadow-md: 0 4px 14px rgb(15 23 42 / .08);
--shadow-lg: 0 14px 38px rgb(15 23 42 / .14);
/* ── Radii ───────────────────────────────────────────────────────────── */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
color-scheme: light;
}
:root[data-theme="dark"] {
/* ── Neutrals / surfaces (DARK) — the locked, WCAG-verified palette ───── */
--bg: 15 23 42; /* slate-900 */
--surface: 30 41 59; /* slate-800 */
--elevated: 38 50 71; /* slightly lifted slate */
--border: 51 65 85; /* slate-700 */
--border-strong: 71 85 105; /* slate-600 */
--fg: 241 245 249; /* slate-50 */
--fg-soft: 203 213 225; /* slate-300 */
--muted: 148 163 184; /* slate-400 */
--accent: 234 179 8; /* #EAB308 brand gold */
--accent-strong: 202 138 4; /* #CA8A04 */
--accent-fg: 15 23 42; /* dark text on gold */
--success: 110 231 183; /* emerald-300 */
--warning: 250 204 21; /* amber-400 */
--danger: 252 165 165; /* red-300 */
--info: 147 197 253; /* blue-300 */
--ring: 234 179 8;
--shadow-sm: 0 1px 2px rgb(0 0 0 / .30);
--shadow-md: 0 6px 20px rgb(0 0 0 / .40);
--shadow-lg: 0 18px 44px rgb(0 0 0 / .55);
color-scheme: dark;
}
/* Soft, theme-aware tints for status badges / banners (bg fills behind colored
text). Kept separate from the solid tokens so badges read well in both modes. */
:root {
--success-tint: 5 150 105;
--warning-tint: 180 83 9;
--danger-tint: 220 38 38;
--info-tint: 37 99 235;
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}