/* ============================================================ HYPERCRUIT CANDIDATE PORTAL — DESIGN TOKENS hc-tokens.css | Drop into /static/css/ Supports: light mode (default) + dark mode via [data-theme="dark"] ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap'); /* ════════════════════════════════════════════════════════════ 1. LIGHT MODE (default) ════════════════════════════════════════════════════════════ */ :root { /* Brand */ --hc-purple-deep: #0d1526; /* sidebar bg (navy) */ --hc-purple: #2563EB; /* primary accent light (blue) */ --hc-purple-soft: #93c5fd; /* sidebar active text, badges */ --hc-purple-tint: #eff6ff; /* hover states, pill bg */ --hc-purple-subtle: #dbeafe; /* progress track, stat borders */ --hc-gold: #8a6a00; /* verified chip text light */ --hc-gold-bg: rgba(138,106,0,0.07); --hc-gold-border: rgba(138,106,0,0.18); /* Page chrome */ --hc-bg-page: #f4f2f7; --hc-bg-surface: #ffffff; --hc-bg-sidebar: #0d1526; --hc-bg-stat: #ffffff; --hc-bg-job: #ffffff; --hc-bg-job-hover: #faf9fe; --hc-border: #e5e0f5; --hc-border-subtle: #ede9f8; /* Text */ --hc-text-primary: #12091f; --hc-text-secondary: #6b5f85; --hc-text-tertiary: #a096b8; /* Sidebar */ --hc-sidebar-text: rgba(255,255,255,0.58); --hc-sidebar-active-text: #93c5fd; --hc-sidebar-active-bg: rgba(37,99,235,0.12); --hc-sidebar-label: rgba(255,255,255,0.28); --hc-sidebar-divider: rgba(255,255,255,0.08); /* Verified chip (sidebar) */ --hc-verified-bg: rgba(200,168,75,0.0); --hc-verified-border: rgba(255,255,255,0.12); --hc-verified-text: rgba(255,255,255,0.55); --hc-verified-done: #a0f0cc; --hc-verified-todo: rgba(255,255,255,0.25); /* Accent / CTA */ --hc-accent: #2563EB; --hc-accent-text: #ffffff; --hc-accent-hover: #1d4ed8; /* Match score */ --hc-match-color: #2563EB; /* Profile progress */ --hc-progress-track: #dbeafe; --hc-progress-fill: #2563EB; /* Credential pills */ --hc-pill-done-bg: #e1f5ee; --hc-pill-done-text: #085041; --hc-pill-todo-bg: #f4f2f7; --hc-pill-todo-text: #6b5f85; --hc-pill-todo-border: #ddd8ee; /* Why-matched tag */ --hc-why-bg: #e1f5ee; --hc-why-text: #0f6e56; /* Stat card label */ --hc-stat-label: #6b5f85; --hc-stat-value: #12091f; /* Toggle */ --hc-toggle-track: #0d1526; --hc-toggle-knob: #93c5fd; /* Typography */ --hc-font-ui: 'Manrope', system-ui, sans-serif; --hc-font-display: 'Space Grotesk', system-ui, sans-serif; /* Radii */ --hc-radius-sm: 6px; --hc-radius-md: 8px; --hc-radius-lg: 12px; --hc-radius-xl: 16px; --hc-radius-pill: 99px; /* Transitions */ --hc-transition: 0.25s ease; } /* ════════════════════════════════════════════════════════════ 2. DARK MODE ([data-theme="dark"] on or ) ════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Page chrome */ --hc-bg-page: #0d1117; --hc-bg-surface: #1a1d2e; --hc-bg-sidebar: #0d1117; --hc-bg-stat: #1a1d2e; --hc-bg-job: #1a1d2e; --hc-bg-job-hover: #1e2235; --hc-border: #2a2d3a; --hc-border-subtle: #222538; /* Text */ --hc-text-primary: #f0ecff; --hc-text-secondary: rgba(255,255,255,0.42); --hc-text-tertiary: rgba(255,255,255,0.22); /* Sidebar (same shell stays dark, accent shifts to gold) */ --hc-sidebar-text: rgba(255,255,255,0.62); --hc-sidebar-active-text: #c8a84b; --hc-sidebar-active-bg: rgba(200,168,75,0.12); --hc-sidebar-label: rgba(255,255,255,0.34); --hc-sidebar-divider: rgba(255,255,255,0.06); /* Verified chip */ --hc-verified-bg: rgba(200,168,75,0.08); --hc-verified-border: rgba(200,168,75,0.25); --hc-verified-text: #c8a84b; --hc-verified-done: #5dcaa5; --hc-verified-todo: rgba(255,255,255,0.38); /* Accent shifts to gold in dark */ --hc-accent: #c8a84b; --hc-accent-text: #0d1117; --hc-accent-hover: #d4b05a; /* Match score */ --hc-match-color: #c8a84b; /* Progress */ --hc-progress-track: rgba(255,255,255,0.08); --hc-progress-fill: #c8a84b; /* Credential pills */ --hc-pill-done-bg: rgba(29,158,117,0.15); --hc-pill-done-text: #5dcaa5; --hc-pill-todo-bg: rgba(255,255,255,0.04); --hc-pill-todo-text: rgba(255,255,255,0.25); --hc-pill-todo-border: rgba(255,255,255,0.1); /* Why-matched tag */ --hc-why-bg: rgba(29,158,117,0.12); --hc-why-text: #5dcaa5; /* Stat card */ --hc-stat-label: rgba(255,255,255,0.3); --hc-stat-value: #f0ecff; /* Brand accent colors (gold for dark) */ --hc-gold: #c8a84b; --hc-gold-bg: rgba(200,168,75,0.1); --hc-gold-border: rgba(200,168,75,0.28); /* Toggle */ --hc-toggle-track: #c8a84b; --hc-toggle-knob: #0d1117; }