/* ───────────────────────────────────────────────────────────────── Theme tokens — single source of truth for the RDS palette. The :root block ships today (light theme); the [data-theme=dark] block is wired in but unused until PR 2 dials it in visually. Custom-property naming follows: brand → surfaces → borders → text → status. Refactored stylesheets call var(--token). ───────────────────────────────────────────────────────────────── */ :root { /* Brand */ --brand-primary: #193f94; --brand-primary-dark: #122d6b; --brand-primary-light: #2563eb; --brand-accent: #3b82f6; --brand-hover: #1d4ed8; --brand-soft: #eff6ff; /* Page surfaces */ --bg-page: #f1f5f9; --bg-subtle: #f8fafc; --bg-card: #ffffff; --bg-inverse: #0f172a; /* Borders */ --border-default: #e2e8f0; --border-strong: #cbd5e1; /* Text */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-disabled: #94a3b8; --text-on-brand: #ffffff; /* Status */ --color-success: #16a34a; --color-success-soft: #dcfce7; --color-danger: #dc2626; --color-danger-soft: #fee2e2; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-info: #3b82f6; --color-info-soft: #dbeafe; /* Slate ramp (use when no semantic role fits) */ --slate-950: #020617; --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; /* Brand secondary (used on a handful of admin chrome elements) */ --brand-secondary: #2B2B9D; /* Status full palette */ --color-success-dark: #15803d; --color-success-bg: #f0fdf4; --color-danger-light: #ef4444; --color-danger-mid: #fca5a5; --color-danger-bg: #fef2f2; --color-danger-text: #991b1b; --color-warning-dark: #d97706; --color-warning-bg: #fffbeb; /* Info / soft accents used on badges */ --color-info-mid: #93c5fd; --color-info-strong: #bfdbfe; /* Neutral greys outside the slate ramp */ --grey-light: #d1d5db; --grey-lighter: #d6d6d6; --caducada-bg: #F7C785; --caducada-bg-hover: #B5CEE5; --slate-50: #f8fafc; } /* Dark theme — wired but not visually finished. Active only when an ancestor (typically ) carries data-theme="dark". The brand blue is preserved as anchor; surfaces invert toward slate; soft variants pick up a translucent overlay rather than a pastel fill. */ :root[data-theme="dark"] { --bg-page: #0f172a; --bg-subtle: #1e293b; --bg-card: #1e293b; --bg-inverse: #f1f5f9; --border-default: #334155; --border-strong: #475569; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-disabled: #64748b; --brand-soft: rgba(25, 63, 148, 0.22); --color-success-soft: rgba(22, 163, 74, 0.18); --color-danger-soft: rgba(220, 38, 38, 0.22); --color-warning-soft: rgba(245, 158, 11, 0.18); --caducada-bg: rgba(220, 38, 38, 0.14); --caducada-bg-hover: rgba(220, 38, 38, 0.22); --color-info-soft: rgba(59, 130, 246, 0.18); --color-success-bg: rgba(22, 163, 74, 0.14); --color-danger-bg: rgba(220, 38, 38, 0.18); --color-danger-mid: rgba(220, 38, 38, 0.55); --color-danger-text: #fca5a5; --color-warning-bg: rgba(245, 158, 11, 0.14); --color-info-soft: rgba(59, 130, 246, 0.16); }