/* ═══════════════════════════════════════════════════════════════
   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);
}

/* ── View transitions ── */
/* Opt every same-origin full-page navigation into the cross-document View
   Transitions API. Loaded on every page (base + login), so both the outgoing
   and incoming documents opt in. The persistent navbar carries its own
   view-transition-name (see layout.css) so it morphs in place instead of
   flickering. Unsupported browsers ignore this and navigate as before. */
@view-transition { navigation: auto; }

/* The browser default crossfade fades old→new simultaneously (~250ms each).
   Instead: old page disappears instantly (no fade-out) so any open dialogs or
   panels on the outgoing page never ghost into the transition. New page fades
   in quickly, giving Datastar time to initialize before content is fully
   visible. Navbar (own view-transition-name) stays steady throughout. */
::view-transition-old(root) {
	animation: none;
}
::view-transition-new(root) {
	animation: vt-page-enter 150ms ease-out;
}
@keyframes vt-page-enter {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── 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;
	/* Reserve a fixed scrollbar gutter on every page so the layout width is
	   constant whether or not a scrollbar is visible. Without this the navbar
	   shifts left when the candidates view (or any tall page) adds a scrollbar. */
	scrollbar-gutter: stable;
}

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;
	}
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !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);
}