/* * Design tokens — the single source of truth for color, spacing, radius, * shadow, and type used by every redesigned screen. Swapping these values * (or, later, generating them from the Branding/Settings UI) re-themes the * whole panel without touching component CSS. * * Light is the default; dark applies via [data-theme="dark"] on , * toggled by assets/js/theme.js. A prefers-color-scheme fallback covers * "system" mode before JS has a saved preference. */ :root { /* Brand (placeholder defaults — replaced by Branding/Settings UI later) */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-accent: #0ea5e9; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; /* Surface */ --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-border: #e2e8f0; --color-border-strong: #cbd5e1; /* Text */ --color-text: #0f172a; --color-text-muted: #64748b; --color-text-inverse: #f8fafc; /* Focus / interactive */ --color-focus-ring: #2563eb; /* Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Source Sans Pro", sans-serif; --transition-fast: 120ms ease; --transition-base: 200ms ease; } /* System dark mode, before an explicit user choice is saved */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0b1220; --color-surface: #111a2c; --color-surface-raised: #16213a; --color-border: #223049; --color-border-strong: #2d3e5f; --color-text: #e6ebf5; --color-text-muted: #93a3bf; --color-text-inverse: #0b1220; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); } } /* Explicit user choice (persisted by assets/js/theme.js) */ :root[data-theme="dark"] { --color-bg: #0b1220; --color-surface: #111a2c; --color-surface-raised: #16213a; --color-border: #223049; --color-border-strong: #2d3e5f; --color-text: #e6ebf5; --color-text-muted: #93a3bf; --color-text-inverse: #0b1220; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); } /* Respect the OS-level "reduce motion" preference everywhere */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }