/* ============================================================================ HR Agent — Design Tokens Two-layer system: 1) Primitives (raw ramps) -> never reference directly in templates 2) Semantic (what templates use) -> swap values per theme Theme switch via [data-theme="light"|"dark"] on . ============================================================================ */ :root { /* ----- Primitive: Neutrals ----- */ --gray-50: #f7f8fa; --gray-100: #f1f3f5; --gray-200: #e2e6ec; --gray-300: #cbd5e0; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --gray-950: #0b0d10; /* ----- Primitive: Brand Blue (3Lines, derived from logo wordmark #2E6FA8) ----- */ --teal-50: #e8effa; --teal-100: #c5d6ee; --teal-200: #8fb1da; --teal-300: #5a8dc5; --teal-500: #2E6FA8; --teal-600: #265a89; --teal-700: #1d456a; /* ----- Primitive: Semantic colors ----- */ --green-500: #16a34a; --green-400: #34d399; --amber-500: #d97706; --amber-400: #fbbf24; --red-500: #dc2626; --red-400: #f87171; --blue-500: #0284c7; --blue-400: #38bdf8; --purple-500: #6741d9; --purple-400: #a78bfa; /* ----- Typography (3Lines Design System) ----- */ --font-display: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-arabic: 'IBM Plex Sans Arabic', var(--font-body); --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --fs-display: 2.25rem; /* 36 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.55; --lh-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.08em; /* ----- Spacing (4px base) ----- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ----- Radius ----- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px; --r-pill: 9999px; /* ----- Motion ----- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; } /* ============================================================================ LIGHT MODE (default) ============================================================================ */ :root, [data-theme="light"] { /* Surfaces */ --bg-page: var(--gray-50); --bg-surface: #ffffff; --bg-surface-raised: #ffffff; --bg-surface-sunken: var(--gray-100); --bg-overlay: rgba(15, 23, 42, 0.45); /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-400); --text-inverse: #ffffff; --text-link: var(--teal-500); /* Borders */ --border-subtle: #eef0f3; --border-default: var(--gray-200); --border-strong: var(--gray-300); /* Brand */ --brand-50: var(--teal-50); --brand-100: var(--teal-100); --brand-500: var(--teal-500); --brand-600: var(--teal-600); --brand-700: var(--teal-700); --brand-tint: rgba(46, 111, 168, 0.10); --brand-tint-strong: rgba(46, 111, 168, 0.16); /* Semantic - Foreground */ --success: var(--green-500); --warning: var(--amber-500); --danger: var(--red-500); --info: var(--blue-500); --purple: var(--purple-500); /* Semantic - Soft tinted backgrounds */ --success-bg: #ecfdf5; --warning-bg: #fffbeb; --danger-bg: #fef2f2; --info-bg: #f0f9ff; --purple-bg: #f5f3ff; /* Status badge tints (used by candidate pipeline) */ --status-new-bg: var(--teal-50); --status-new-fg: var(--teal-600); --status-screening-bg: #fff7e6; --status-screening-fg: #b45309; --status-qualified-bg: #ecfdf5; --status-qualified-fg: #047857; --status-interview-bg: #f5f3ff; --status-interview-fg: #6d28d9; --status-offer-bg: #eef2ff; --status-offer-fg: #4338ca; --status-hired-bg: #d1fae5; --status-hired-fg: #065f46; --status-rejected-bg: #fee2e2; --status-rejected-fg: #b91c1c; /* Focus ring */ --focus-ring: rgba(46, 111, 168, 0.25); --focus-ring-color: var(--brand-500); /* Shadows (subtle in light mode) */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.14); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.20); --shadow-inner-highlight: none; /* Scrollbar */ --scrollbar-thumb: var(--gray-300); --scrollbar-track: transparent; /* Skeleton loading gradient */ --skeleton-from: #f0f0f0; --skeleton-to: #e0e0e0; } /* ============================================================================ DARK MODE ============================================================================ */ [data-theme="dark"] { /* Surfaces */ --bg-page: #0b0d10; --bg-surface: #15181d; --bg-surface-raised: #1c2026; --bg-surface-sunken: #0f1115; --bg-overlay: rgba(0, 0, 0, 0.65); /* Text */ --text-primary: #f1f5f9; --text-secondary: #cbd5e0; --text-muted: #8b96a5; --text-inverse: var(--gray-900); --text-link: var(--teal-300); /* Borders */ --border-subtle: #1f242b; --border-default: #2a3038; --border-strong: #3a4250; /* Brand (lifted 3Lines blue for dark contrast) */ --brand-50: rgba(122, 169, 218, 0.10); --brand-100: rgba(122, 169, 218, 0.18); --brand-500: #7aa9da; --brand-600: #2E6FA8; --brand-700: #1d456a; --brand-tint: rgba(122, 169, 218, 0.14); --brand-tint-strong: rgba(122, 169, 218, 0.22); /* Semantic - Foreground (lighter for dark bg) */ --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #38bdf8; --purple: #a78bfa; /* Semantic - Soft tinted backgrounds */ --success-bg: rgba(52, 211, 153, 0.12); --warning-bg: rgba(251, 191, 36, 0.12); --danger-bg: rgba(248, 113, 113, 0.12); --info-bg: rgba(56, 189, 248, 0.12); --purple-bg: rgba(167, 139, 250, 0.12); /* Status badge tints */ --status-new-bg: rgba(122, 169, 218, 0.14); --status-new-fg: #a3c5e8; --status-screening-bg: rgba(251, 191, 36, 0.12); --status-screening-fg: #fcd34d; --status-qualified-bg: rgba(52, 211, 153, 0.12); --status-qualified-fg: #6ee7b7; --status-interview-bg: rgba(167, 139, 250, 0.12); --status-interview-fg: #c4b5fd; --status-offer-bg: rgba(129, 140, 248, 0.14); --status-offer-fg: #a5b4fc; --status-hired-bg: rgba(52, 211, 153, 0.18); --status-hired-fg: #86efac; --status-rejected-bg: rgba(248, 113, 113, 0.14); --status-rejected-fg: #fca5a5; /* Focus ring */ --focus-ring: rgba(122, 169, 218, 0.40); --focus-ring-color: var(--brand-500); /* Shadows (deeper in dark mode + inner highlight) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 14px -2px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 36px -8px rgba(0, 0, 0, 0.60); --shadow-xl: 0 28px 56px -12px rgba(0, 0, 0, 0.70); --shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* Scrollbar */ --scrollbar-thumb: var(--border-strong); --scrollbar-track: transparent; /* Skeleton loading gradient */ --skeleton-from: #1c2026; --skeleton-to: #2a3038; color-scheme: dark; } /* ============================================================================ LEGACY COMPAT VARS These keep templates that still reference the old variable names working while we sweep them. Remove once `style="color: var(--primary)"` literals are gone from every template. ============================================================================ */ :root { --primary: var(--brand-500); --primary-dark: var(--brand-600); --primary-light: var(--brand-500); --text-title: var(--text-primary); --text-highlight: var(--brand-500); --text-body-light: var(--text-primary); --text-body-dark: var(--text-primary); --text-gray: var(--text-muted); --border-light: var(--border-default); --border-dark: var(--border-strong); --bg-light: var(--bg-surface); --bg-dark: var(--bg-page); }