/* ═══════════════════════════════════════════════════════════════════════════ Base tokens — spacing, typography, radius, transitions. These NEVER change between themes — always available via :root. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Spacing ────────────────────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; /* ── Typography ─────────────────────────────────────────────────────────── */ --font-family: "Roboto Flex", system-ui, sans-serif; --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Border radius ──────────────────────────────────────────────────────── */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* ── Transitions ────────────────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-std: 0.25s ease; } /* ═══════════════════════════════════════════════════════════════════════════ Default Theme — colour tokens Apply by setting data-theme="default" on ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="default"] { /* ── Brand ──────────────────────────────────────────────────────────────── */ --primary: #3b82f6; --primary-hover: #2563eb; --primary-light: #eff6ff; --accent: #D92831; /* ── Surfaces ───────────────────────────────────────────────────────────── */ --bg-app: #f3f4f6; --bg-card: #ffffff; --bg-input: #ffffff; --bg-input-disabled: #f9fafb; /* ── Table ──────────────────────────────────────────────────────────────── */ --table-header-bg: #f1f5f9; --table-header-text: #1e293b; --table-row-bg: #ffffff; --table-row-alt-bg: #f8fafc; --table-row-hover: #f1f5f9; --table-cell-text: #334155; --table-border: #e2e8f0; /* ── Sidebar ────────────────────────────────────────────────────────────── */ --sidebar-bg: #102241; --sidebar-text: #c8d6e8; --sidebar-text-active: #ffffff; --sidebar-item-hover: rgba(255,255,255,0.08); --sidebar-item-active: rgba(255,255,255,0.15); --sidebar-border: rgba(255,255,255,0.06); /* ── TopBar ─────────────────────────────────────────────────────────────── */ --topbar-bg: #ffffff; --topbar-border: #e5e7eb; --topbar-text: #374151; --topbar-height: 50px; /* ── Text ───────────────────────────────────────────────────────────────── */ --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-disabled: #9ca3af; --text-label: #4b5563; --text-error: #dc2626; /* ── Borders ────────────────────────────────────────────────────────────── */ --border: #d1d5db; --border-focus: #3b82f6; --border-error: #dc2626; /* ── Shadows ────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05); /* ── Semantic ───────────────────────────────────────────────────────────── */ --success: #10b981; --warning: #f59e0b; --error: #dc2626; --info: #3b82f6; /* ── Form actions bar ───────────────────────────────────────────────────── */ --form-actions-bg: #ffffff; --form-actions-border: #e5e7eb; /* ── Separator ──────────────────────────────────────────────────────────── */ --separator-color: #D92831; /* ── Buttons ────────────────────────────────────────────────────────────── */ --btn-primary-bg: var(--primary); --btn-primary-text: #ffffff; --btn-primary-hover: var(--primary-hover); --btn-secondary-bg: #ffffff; --btn-secondary-text: var(--text-secondary); --btn-secondary-border: var(--border); --btn-secondary-hover: #f9fafb; --btn-danger-bg: var(--error); --btn-danger-text: #ffffff; }