/* ═══════════════════════════════════════════════════════════════
   Recruiter — Design System (ported from CommPass)
   Theme: Near-black navy + warm gold
   Fonts: Bricolage Grotesque (display) + Figtree (body) + Geist Mono
   Brand source: passbeyond.com — navy #0B1D3A, gold #C9A84C
   ═══════════════════════════════════════════════════════════════ */

:root {
	/* ── Surfaces — lifted a few % from the original commpass palette for
	   stronger contrast / less eye strain on this app's heavier UI. ── */
	--bg-base:        oklch(14% 0.042 252);    /* page background */
	--surface-0:      oklch(14% 0.042 252);
	--surface-1:      oklch(18% 0.052 252);    /* navbar, primary cards */
	--surface-2:      oklch(22% 0.050 252);    /* elevated card / popovers */
	--surface-3:      oklch(27% 0.044 252);    /* input bg */

	/* ── Borders — bumped for visibility against the darker surfaces. ── */
	--border:         oklch(36% 0.044 252);
	--border-subtle:  oklch(28% 0.040 252);

	/* ── Text — muted brightened so secondary/help text passes AA. ── */
	--text-primary:   oklch(95% 0.010 250);
	--text-secondary: oklch(78% 0.022 250);
	--text-muted:     oklch(64% 0.030 252);
	--text-disabled:  oklch(46% 0.020 252);

	/* ── Gold accent — exact brand #C9A84C ── */
	--gold:           oklch(70.5% 0.103 72);
	--gold-hover:     oklch(75% 0.100 72);     /* #D4B96A brand gold-light */
	--gold-subtle:    oklch(70.5% 0.038 72);
	--gold-bg:        oklch(17% 0.030 72);

	/* ── Status — brand #34D399 / #FBBF24 / #EF4444 / #3B82F6 ── */
	--success:        oklch(77% 0.15 162);
	--success-bg:     oklch(14% 0.030 162);
	--warning:        oklch(75% 0.13 70);
	--warning-bg:     oklch(14% 0.028 70);
	--danger:         oklch(59% 0.20 25);
	--danger-bg:      oklch(14% 0.032 25);
	--info:           oklch(58% 0.20 262);
	--info-bg:        oklch(14% 0.028 262);

	/* ── Typography ── */
	--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--font-body:    'Figtree', system-ui, sans-serif;
	--font-mono:    'Geist Mono', 'Cascadia Code', ui-monospace, monospace;

	/* ── Radius / spacing / shadow / motion ── */
	--radius-sm:    6px;
	--radius:       10px;
	--radius-lg:    14px;
	--radius-xl:    18px;

	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

	--shadow-sm:   0 1px 3px oklch(0% 0 0 / 0.35), 0 1px 2px oklch(0% 0 0 / 0.25);
	--shadow-md:   0 4px 12px oklch(0% 0 0 / 0.40), 0 2px 4px oklch(0% 0 0 / 0.20);
	--shadow-lg:   0 12px 32px oklch(0% 0 0 / 0.50), 0 4px 8px oklch(0% 0 0 / 0.25);
	--shadow-gold: 0 0 0 1px var(--gold), 0 4px 20px oklch(70.5% 0.103 72 / 0.15);

	--transition-fast: 80ms cubic-bezier(0.22, 1, 0.36, 1);
	--transition-base: 150ms cubic-bezier(0.22, 1, 0.36, 1);
	--transition-slow: 250ms cubic-bezier(0.22, 1, 0.36, 1);

	--nav-height: 56px;
	--radius-default: var(--radius);

	/* ─────────────────────────────────────────────────────────────────
	   Legacy aliases — every feature CSS in this app references these.
	   Keeping them aliased to the canonical brand tokens means the
	   rest of the codebase doesn't need to change.
	   ───────────────────────────────────────────────────────────────── */
	--bg:             var(--bg-base);
	--card:           var(--surface-1);
	--card2:          var(--surface-2);
	--surface:        var(--surface-1);
	/* --surface-2 already defined above */
	--input-bg:       var(--surface-3);

	--accent:         var(--gold);
	--accent-light:   var(--gold-hover);
	--accent-hover:   var(--gold-hover);
	--accent-strong:  var(--gold-hover);

	--text:           var(--text-primary);
	--muted:          var(--text-muted);

	--green:          var(--success);
	--red:            var(--danger);

	/* Status aliases (status-card borders, score band colors). */
	--status-ok:      var(--success);
	--status-warn:    var(--warning);
	--status-info:    var(--info);
	--status-err:     var(--danger);

	/* Pill backgrounds + foregrounds — translucent on dark with readable text. */
	--pill-ok-bg:           color-mix(in oklch, var(--success) 18%, transparent);
	--pill-ok-fg:           oklch(85% 0.13 162);
	--pill-fail-bg:         color-mix(in oklch, var(--danger) 18%, transparent);
	--pill-fail-fg:         oklch(75% 0.15 25);
	--pill-warn-bg:         color-mix(in oklch, var(--warning) 18%, transparent);
	--pill-warn-fg:         oklch(82% 0.13 70);
	--pill-info-bg:         color-mix(in oklch, var(--info) 18%, transparent);
	--pill-info-fg:         oklch(75% 0.16 262);
	--pill-neutral-bg:      color-mix(in oklch, var(--text-muted) 16%, transparent);
	--pill-neutral-fg:      var(--text-secondary);

	/* Body/sans alias — most of our CSS asks for --font-sans. */
	--font-sans:    var(--font-body);
}

/* ── Reset ── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	font-family: var(--font-body);
	background: var(--bg-base);
	color: var(--text-primary);
	min-height: 100vh;
	line-height: 1.55;
	letter-spacing: 0.01em;
}

/* ── Base typography ── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--text-primary);
}

code, kbd, samp, pre {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: var(--surface-2);
	padding: 0.1em 0.35em;
	border-radius: var(--radius-sm);
	color: var(--gold);
}

a {
	color: var(--gold);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover { color: var(--gold-hover); }

/* ── Universal focus indicators (WCAG 2.4.7) ──────────────────────── */
:where(input, select, textarea):focus {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-color: transparent;
}

:where(button, a, [role="button"]):focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 4px;
}

:where(button):focus { outline: none; }

/* ── A11y utilities ─────────────────────────────────────────────────── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -3rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.6rem 0.9rem;
	background: var(--gold);
	color: var(--bg-base);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 6px 6px;
	transition: top 0.12s;
}

.skip-link:focus {
	top: 0;
	outline: 2px solid var(--gold-hover);
	outline-offset: 2px;
	color: var(--bg-base);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Selection ── */
::selection {
	background: color-mix(in oklch, var(--gold) 25%, transparent);
	color: var(--text-primary);
}