72 lines
3.1 KiB
CSS
72 lines
3.1 KiB
CSS
:root {
|
|
/* ── Brand palette ─────────────────────────────────── */
|
|
--color-brand-50: #EBF3FF;
|
|
--color-brand-100: #BFDBFE;
|
|
--color-brand-600: #1A73E8;
|
|
--color-brand-700: #1557B0;
|
|
--color-brand-900: #0D47A1;
|
|
|
|
/* ── Semantic / status ─────────────────────────────── */
|
|
--color-success: #34A853;
|
|
--color-success-light: #D1FAE5;
|
|
--color-warning: #F59E0B;
|
|
--color-warning-light: #FEF3C7;
|
|
--color-danger: #E53935;
|
|
--color-danger-light: #FEE2E2;
|
|
--color-info: #1A73E8;
|
|
--color-info-light: #EBF3FF;
|
|
|
|
/* ── Surface (light mode) ──────────────────────────── */
|
|
--color-surface: #FFFFFF;
|
|
--color-surface-muted: #F9FAFB;
|
|
--color-surface-sunken: #ECEEF2;
|
|
--color-border: #E5E7EB;
|
|
--color-border-strong: #D1D5DB;
|
|
|
|
/* ── Text (light mode) ─────────────────────────────── */
|
|
--color-text-primary: #111827;
|
|
--color-text-secondary:#374151;
|
|
--color-text-muted: #6B7280;
|
|
--color-text-hint: #9CA3AF;
|
|
--color-text-inverse: #FFFFFF;
|
|
|
|
/* ── Surface (dark — admin dashboard) ─────────────── */
|
|
--color-surface-dark: #020617; /* slate-950 */
|
|
--color-surface-dark-raised: #0F172A; /* slate-900 */
|
|
--color-surface-dark-card: #1E293B; /* slate-800 */
|
|
--color-border-dark: rgba(255, 255, 255, 0.10);
|
|
--color-text-dark-primary: #F1F5F9; /* slate-100 */
|
|
--color-text-dark-muted: #94A3B8; /* slate-400 */
|
|
|
|
/* ── Typography ────────────────────────────────────── */
|
|
--font-sans: 'Plus Jakarta Sans', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
|
|
/* ── Radius ────────────────────────────────────────── */
|
|
--radius-sm: 7px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
--radius-2xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ── Spacing / layout ──────────────────────────────── */
|
|
--sidebar-width: 280px;
|
|
--topbar-height: 56px;
|
|
--page-max-width: 1280px;
|
|
--page-padding-x: 24px;
|
|
|
|
/* ── Shadows ───────────────────────────────────────── */
|
|
--shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
|
|
--shadow-overlay: 0 20px 60px rgba(0,0,0,.25);
|
|
|
|
/* ── Transitions ───────────────────────────────────── */
|
|
--transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ── Reduced-motion: disable spinner animation ──────── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-spin {
|
|
animation: none;
|
|
}
|
|
} |