/* ========================================================================= Design tokens — single source of truth for the whole app. Style: "Trust & Authority" (enterprise HR SaaS). Professional blue + green. Every color/spacing/radius/shadow used in the app MUST come from here. Never hardcode hex values in component or module CSS. ========================================================================= */ :root { /* ── Brand ramp (blue) ─────────────────────────────────────────────── */ --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; --blue-900: #1e3a8a; /* ── Neutral ramp (slate) ──────────────────────────────────────────── */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; /* ── Functional ramps ──────────────────────────────────────────────── */ --green-500: #10b981; --green-600: #059669; --green-700: #047857; --amber-500: #f59e0b; --amber-600: #d97706; --orange-500: #f97316; --orange-600: #ea580c; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; /* ── Spacing scale (4px base) ──────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* ── Radius scale ──────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Typography ────────────────────────────────────────────────────── */ /* 2026-07-13 — swapped from Plus Jakarta Sans to Inter (loaded in index.html's ) as the first step of a broader premium-SaaS redesign pass — see git log for the rest of that pass, done module by module rather than in one uncontrolled sweep. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ── Shadows (light) ───────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.08); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.10); /* ── Motion ────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms; /* ── Z-index scale ─────────────────────────────────────────────────── */ --z-base: 0; --z-sticky: 40; --z-header: 100; --z-drawer: 200; --z-modal: 1000; --z-toast: 1100; /* ── Layout / app shell tokens ─────────────────────────────────────── */ --sidebar-width: 264px; --sidebar-width-collapsed: 72px; --header-height: 64px; --content-max: 1280px; /* ===================================================================== SEMANTIC TOKENS — light theme (default). Components reference ONLY these, never the ramps above. ===================================================================== */ --color-primary: var(--blue-600); --color-primary-hover: var(--blue-700); --color-primary-active: var(--blue-800); --color-primary-soft: var(--blue-50); --color-on-primary: #ffffff; --brand-gradient: linear-gradient(135deg, var(--blue-500), var(--blue-800)); --color-accent: var(--green-600); --color-accent-hover: var(--green-700); --color-on-accent: #ffffff; --color-bg: var(--slate-50); --color-surface: #ffffff; --color-surface-2: var(--slate-50); --color-surface-hover: var(--slate-100); --color-overlay: rgba(15, 23, 42, 0.5); --color-fg: var(--slate-900); --color-fg-muted: var(--slate-500); --color-fg-subtle: var(--slate-400); --color-on-surface: var(--slate-800); /* #e5e7eb, not var(--slate-200) (#e2e8f0) — kept as its own literal so tuning it doesn't also shift --color-on-surface, which reuses the slate-200 ramp value for dark-mode text (see that theme's block below). */ --color-border: #e5e7eb; --color-border-strong: var(--slate-300); --color-ring: var(--blue-600); --color-success: var(--green-600); --color-success-soft: #ecfdf5; --color-warning: var(--amber-600); --color-warning-soft: #fffbeb; --color-danger: var(--red-600); --color-danger-soft: #fef2f2; --color-info: var(--blue-600); --color-info-soft: var(--blue-50); --color-orange: var(--orange-500); --color-orange-hover: var(--orange-600); --color-orange-soft: #ffedd5; --color-weekend-soft: #fef9c3; color-scheme: light; } /* ========================================================================= DARK THEME — desaturated tonal variants, contrast tested independently. Toggled by [data-theme="dark"] on (set by js/core/app.js). ========================================================================= */ :root[data-theme='dark'] { --color-primary: var(--blue-500); --color-primary-hover: var(--blue-400); --color-primary-active: var(--blue-300); --color-primary-soft: rgba(37, 99, 235, 0.14); --color-on-primary: #ffffff; --brand-gradient: linear-gradient(135deg, var(--blue-400), var(--blue-600)); --color-accent: var(--green-500); --color-accent-hover: var(--green-600); --color-on-accent: #04120c; --color-bg: var(--slate-950); --color-surface: var(--slate-900); --color-surface-2: var(--slate-800); --color-surface-hover: var(--slate-800); --color-overlay: rgba(2, 6, 23, 0.6); --color-fg: var(--slate-100); --color-fg-muted: var(--slate-400); --color-fg-subtle: var(--slate-500); --color-on-surface: var(--slate-200); --color-border: var(--slate-800); --color-border-strong: var(--slate-700); --color-ring: var(--blue-400); --color-success: var(--green-500); --color-success-soft: rgba(16, 185, 129, 0.14); --color-warning: var(--amber-500); --color-warning-soft: rgba(245, 158, 11, 0.14); --color-danger: var(--red-500); --color-danger-soft: rgba(239, 68, 68, 0.14); --color-info: var(--blue-400); --color-info-soft: rgba(37, 99, 235, 0.14); --color-orange: var(--orange-500); --color-orange-hover: var(--orange-600); --color-orange-soft: rgba(249, 115, 22, 0.18); --color-weekend-soft: rgba(245, 158, 11, 0.16); /* Softer shadows on dark surfaces */ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* Respect OS preference when no explicit choice has been made yet. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { color-scheme: dark; } }