/* POEA clone mockups - shared base (coordinator-owned).
   Tokens = bpoai roles mapped to POEA colours (vault: 12 BPOAI Clone Spec/global-layout.md §8).
   Page and partial CSS (header.css, footer.css, jobs.css, home.css) only consume these tokens. */

/* ---------- Fonts (self-hosted Inter variable, OFL) ---------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: optional;
	src: url(../../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: optional;
	src: url(../../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../../fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../../fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	ascent-override: 90.44%;
	descent-override: 22.52%;
	line-gap-override: 0%;
	size-adjust: 107.12%;
}

/* ---------- Tokens: light (default) ---------- */
:root,
[data-theme="light"] {
	color-scheme: light;
	--font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;

	--background: #f4f5fb;
	--background-secondary: #fff;
	--popover-bg: #fff;
	--foreground: #2f2e41;
	--text-primary: #2f2e41;
	--text-secondary: #3f3d56;
	--foreground-muted: #6b6a7d;
	--text-muted: #6b6a7d;
	--text-faint: #2f2e41ad;

	--primary: #303af7;
	--primary-light: #2227c1;
	--primary-dark: #181c95;
	--primary-50: #4f6fff0f;
	--primary-100: #4f6fff1f;
	--primary-glow: #4f6fff26;
	--accent: #00b0ff;
	--accent-light: #14689a; /* QA R4-19: 4.49 -> 5.0:1 on tinted bg */
	--accent-dark: #1a7cb1;
	--accent-50: #00b0ff0f;
	--accent-glow: #00b0ff1a;
	--pink: #7091ff;
	--pink-glow: #7091ff1a;
	--success: #059669;
	--success-light: #10b981;
	--warning: #d97706;
	--danger: #dc2626;

	--gray-50: #2f2e4108;
	--gray-100: #2f2e410d;
	--gray-200: #2f2e4114;
	--gray-300: #2f2e411f;
	--gray-400: #a09fb7;
	--gray-500: #6b6a7d;
	--gray-600: #3f3d56;
	--gray-700: #3e3d54;
	--gray-800: #27263a;
	--gray-900: #2f2e41;

	--card-bg: #fffc;
	--card-bg-hover: #fffffff2;
	--card-border: #2f2e4114;
	--card-border-hover: #4f6fff40;
	--card-shadow: 0 1px 3px #0000000a, 0 1px 2px #0000000f;
	--card-shadow-hover: 0 10px 40px #4f6fff14, 0 4px 16px #0000000f;
	--glass-bg: #ffffffd9;
	--glass-border: #2f2e4114;

	--gradient-primary: linear-gradient(135deg, #181c95, #2227c1);
	--gradient-accent: linear-gradient(135deg, #00b0ff, #303af7);
	--gradient-hero: radial-gradient(ellipse at 50% 0%, #4f6fff1f, transparent 60%);
	--gradient-mesh: radial-gradient(ellipse at 20% 0%, #4f6fff1a, transparent 50%), radial-gradient(ellipse at 80% 100%, #00b0ff12, transparent 50%), radial-gradient(ellipse at 50% 50%, #7091ff0a, transparent 50%);

	--nav-bg-default: #ffffff73;
	--nav-bg-scrolled: #ffffffa6;
	--nav-border-color: #4f6fff38;
	--nav-shadow-default: 0 4px 20px #0000000a;
	--nav-shadow-scrolled: 0 8px 32px #00000014, 0 2px 8px #4f6fff0f;

	--input-bg: #2f2e4108;
	--input-border: #2f2e411f;
	--input-text: #2f2e41;
	--input-placeholder: #2f2e41b3; /* AA nudge (jobs §10.1): 70% */

	--border-subtle: #2f2e4114;
	--border-light: #2f2e411a;
	--border-medium: #2f2e4124;
	--row-hover: #2f2e410a;

	--stat-cyan: #2227c1;
	--stat-violet: #1670a1;
	--stat-emerald: #047857;
	--stat-amber: #b45309;

	--badge-cyan-text: #2227c1; --badge-cyan-bg: #303af71f; --badge-cyan-border: #303af747;
	--badge-violet-text: #14689a; --badge-violet-bg: #00b0ff1f; --badge-violet-border: #00b0ff47;
	--badge-gray-text: #3f3d56; --badge-gray-bg: #2f2e4112; --badge-gray-border: #2f2e4124;
	--badge-sky-text: #0369a1; --badge-sky-bg: #0284c71f; --badge-sky-border: #0284c747;
	--badge-amber-text: #9a4508; /* AA nudge (QA R4-1): bpoai #b45309 = 3.99-4.33:1 on the tint; this is >= 5.17 */ --badge-amber-bg: #d9770624; --badge-amber-border: #d977064d;
	--badge-emerald-text: #047857; --badge-emerald-bg: #0596691f; --badge-emerald-border: #05966947;
	--badge-indigo-text: #4338ca; --badge-indigo-bg: #4f46e51f; --badge-indigo-border: #4f46e547;
	--badge-red-text: #b91c1c; --badge-red-bg: #dc26261f; --badge-red-border: #dc262647;

	--dot-alpha-hero: .45;
	--dot-alpha-section: .35;
	--dot-rgb: 79, 111, 255;
	--orb-accent: rgba(0, 176, 255, .06);
	--orb-brand: rgba(79, 111, 255, .08);
	--orb-pink: rgba(112, 145, 255, .05);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--ease: cubic-bezier(.4, 0, .2, 1);
	--ease-spring: cubic-bezier(.22, 1, .36, 1);
	--container: 1280px;
	--gutter: 16px;
}

/* ---------- Tokens: dark ---------- */
[data-theme="dark"] {
	color-scheme: dark;
	--background: #0a071a;
	--background-secondary: #110c2a;
	--popover-bg: #1a1539;
	--foreground: #f4f4f9;
	--text-primary: #fff;
	--text-secondary: #a09fb7;
	--foreground-muted: #a09fb7;
	--text-muted: #ffffff75;
	--text-faint: #ffffff75;

	--primary: #7091ff;
	--primary-light: #92adfe;
	--primary-dark: #4f6fff;
	--primary-50: #7091ff14;
	--primary-100: #7091ff26;
	--primary-glow: #7091ff40;
	--accent: #00b0ff;
	--accent-light: #b6e1ff;
	--accent-dark: #008dcd;
	--accent-50: #00b0ff14;
	--accent-glow: #00b0ff33;
	--pink: #92adfe;
	--pink-glow: #92adfe33;
	--success: #10b981;
	--success-light: #34d399;
	--warning: #f59e0b;
	--danger: #ef4444;

	--gray-50: #f4f4f90d;
	--gray-100: #f4f4f914;
	--gray-200: #f4f4f91f;
	--gray-300: #f4f4f933;
	--gray-400: #71708a;
	--gray-500: #a09fb7;
	--gray-600: #d2d2e1;
	--gray-700: #e6e6f0;
	--gray-800: #f4f4f9;
	--gray-900: #fff;

	--card-bg: #ffffff08;
	--card-bg-hover: #ffffff0f;
	--card-border: #ffffff0f;
	--card-border-hover: #7091ff4d;
	--card-shadow: 0 0 0 0 transparent;
	--card-shadow-hover: 0 0 40px #7091ff14, 0 8px 32px #0000004d;
	--glass-bg: #110c2acc;
	--glass-border: #ffffff14;

	--gradient-primary: linear-gradient(135deg, #7091ff, #92adfe);
	--gradient-accent: linear-gradient(135deg, #00b0ff, #7091ff);
	--gradient-hero: radial-gradient(ellipse at 50% 0%, #7091ff26, transparent 60%);
	--gradient-mesh: radial-gradient(ellipse at 20% 0%, #7091ff14, transparent 50%), radial-gradient(ellipse at 80% 100%, #00b0ff0f, transparent 50%), radial-gradient(ellipse at 50% 50%, #92adfe08, transparent 50%);

	--nav-bg-default: #0a071a59;
	--nav-bg-scrolled: #0a071ab8;
	--nav-border-color: #7091ff24;
	--nav-shadow-default: 0 4px 24px #0003;
	--nav-shadow-scrolled: 0 8px 32px #0006, 0 0 0 1px #7091ff14;

	--input-bg: #ffffff0a;
	--input-border: #ffffff14;
	--input-text: #fff;
	--input-placeholder: #ffffff80;

	--border-subtle: #ffffff0f;
	--border-light: #ffffff14;
	--border-medium: #ffffff1a;
	--row-hover: #ffffff0a;

	--stat-cyan: #92adfe;
	--stat-violet: #b6e1ff;
	--stat-emerald: #34d399;
	--stat-amber: #fbbf24;

	--badge-cyan-text: #92adfe; --badge-cyan-bg: #92adfe1a; --badge-cyan-border: #92adfe33;
	--badge-violet-text: #cdeeff; --badge-violet-bg: #b6e1ff1a; --badge-violet-border: #b6e1ff40;
	--badge-gray-text: #a09fb7; --badge-gray-bg: #ffffff0d; --badge-gray-border: #ffffff1a;
	--badge-sky-text: #38bdf8; --badge-sky-bg: #38bdf81a; --badge-sky-border: #38bdf833;
	--badge-amber-text: #fbbf24; --badge-amber-bg: #fbbf241a; --badge-amber-border: #fbbf2433;
	--badge-emerald-text: #34d399; --badge-emerald-bg: #34d3991a; --badge-emerald-border: #34d39933;
	--badge-indigo-text: #a5b4fc; --badge-indigo-bg: #818cf81a; --badge-indigo-border: #818cf833;
	--badge-red-text: #f87171; --badge-red-bg: #f871711a; --badge-red-border: #f8717133;

	--dot-alpha-hero: .22;
	--dot-alpha-section: .22;
	--orb-accent: rgba(0, 176, 255, .12);
	--orb-brand: rgba(79, 111, 255, .15);
	--orb-pink: rgba(112, 145, 255, .10);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	background-color: var(--background); /* QA R3-5: theme colour before <body> parses */
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
	background-color: var(--background);
	color: var(--foreground);
	overflow-x: hidden;
	transition: background-color .3s, color .3s;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	will-change: transform;
	background-image: var(--gradient-mesh);
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea, select { color-scheme: normal; }
::selection { color: var(--foreground); background: rgba(79, 111, 255, .3); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
[hidden] { display: none !important; }

/* Visible focus everywhere (POEA fix: bpoai falls back to the browser default ring). */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.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; left: 16px; top: -100px; z-index: 100;
	padding: 8px 16px; border-radius: var(--radius-md);
	background: var(--primary); color: #fff; font-weight: 600; font-size: 14px;
}
.skip-link:focus { top: 12px; }
[data-theme="dark"] .skip-link { color: #0a071a; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 16px;
}
@media (min-width: 640px) { .container { padding-inline: 24px; } }
@media (min-width: 1024px) { .container { padding-inline: 32px; } }
@media (min-width: 1536px) { :root { --container: 1440px; } }

.icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Background effects (GL §4) ---------- */
.section-dot-bg { position: relative; }
.section-dot-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(var(--dot-rgb), var(--dot-alpha-section)) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(85% 70%, #000 0%, transparent 100%);
	mask-image: radial-gradient(85% 70%, #000 0%, transparent 100%);
}
.glow-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	transition: opacity .3s;
	display: none;
}
@media (min-width: 640px) { .glow-orb { display: block; } }
.glow-orb--accent { background: var(--orb-accent); }
.glow-orb--brand { background: var(--orb-brand); }
.glow-orb--pink { background: var(--orb-pink); }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-subtle), transparent); }
.section-glow { position: relative; }
.section-glow::before {
	content: "";
	position: absolute;
	top: 0; left: 20%; width: 60%; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(79, 111, 255, .4), transparent);
}

/* ---------- Buttons (GL §6.1) ---------- */
.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	border-radius: 12px;
	white-space: nowrap;
	transition: all .3s var(--ease);
}
.btn-primary {
	color: var(--background);
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	box-shadow: 0 0 20px var(--primary-glow);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { cursor: not-allowed; transform: none; }
.btn-secondary {
	color: var(--foreground);
	background: var(--card-bg);
	border: 1px solid var(--border-medium);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.btn-sm { font-size: 14px; line-height: 20px; }
.btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 8px 16px; border-radius: 24px;
	border: 1px solid var(--primary); color: var(--primary-light); background: transparent;
	font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
	transition: all .15s var(--ease);
}
.submit-arrow .arrow-shaft { stroke-dasharray: 10; stroke-dashoffset: 10px; transition: stroke-dashoffset .3s var(--ease-spring); }
.submit-arrow .arrow-head { transition: transform .3s var(--ease-spring); }
@media (hover: hover) {
	.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 0 30px var(--primary-glow); transform: translateY(-1px); }
	.btn-primary:hover:not(:disabled) .arrow-shaft { stroke-dashoffset: 0; }
	.btn-primary:hover:not(:disabled) .arrow-head { transform: translate(2.5px); }
	.btn-secondary:hover { background: var(--primary-50); border-color: rgba(79, 111, 255, .4); transform: translateY(-1px); box-shadow: 0 0 20px rgba(79, 111, 255, .1); }
	.btn-ghost:hover { transform: translateY(-1px); }
}

/* ---------- Badges, pills (GL §6.3) ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 3px 10px;
	border: 1px solid transparent;
	border-radius: 9999px;
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.4;
}
.badge .icon { width: 12px; height: 12px; }
.badge-cyan { color: var(--badge-cyan-text); background: var(--badge-cyan-bg); border-color: var(--badge-cyan-border); }
.badge-violet { color: var(--badge-violet-text); background: var(--badge-violet-bg); border-color: var(--badge-violet-border); }
.badge-gray { color: var(--badge-gray-text); background: var(--badge-gray-bg); border-color: var(--badge-gray-border); }
.badge-sky { color: var(--badge-sky-text); background: var(--badge-sky-bg); border-color: var(--badge-sky-border); }
.badge-amber { color: var(--badge-amber-text); background: var(--badge-amber-bg); border-color: var(--badge-amber-border); }
.badge-emerald { color: var(--badge-emerald-text); background: var(--badge-emerald-bg); border-color: var(--badge-emerald-border); }
.badge-indigo { color: var(--badge-indigo-text); background: var(--badge-indigo-bg); border-color: var(--badge-indigo-border); }
.badge-red { color: var(--badge-red-text); background: var(--badge-red-bg); border-color: var(--badge-red-border); }
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.tag-pill {
	display: inline-flex; align-items: center;
	background: var(--primary-50); color: var(--primary-light);
	border: 1px solid rgba(0, 176, 255, .15); border-radius: 9999px;
	padding: 4px 12px; font-size: .75rem; line-height: 1rem; font-weight: 500;
	transition: all .2s;
}
@media (hover: hover) { .tag-pill:hover { background: var(--primary-100); border-color: rgba(0, 176, 255, .3); } }

/* Eyebrow label (GL §1.5) */
.section-label {
	font-size: .7rem; line-height: 16.8px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--primary-light);
}

/* ---------- Cards (GL §6.5) ---------- */
.glass-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	transition: background .3s, border-color .3s;
}
.card-premium {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: all .4s var(--ease);
}
@media (hover: hover) {
	/* bpoai shrinks to scale(.9); GM §14 verdict: fix to a lift. */
	.card-premium:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); }
}

/* ---------- Keyframes + entrance helpers (GM §5, §10) ---------- */
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pulse { 50% { opacity: .5; } }
.animate-fade-in-up { animation: fadeInUp .6s ease-out forwards; }
.animate-fade-in { animation: fadeIn .4s ease-out forwards; }
.animate-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.fade-content {
	display: block; opacity: 0; transform: translateY(18px);
	transition-property: opacity, transform, filter;
	transition-timing-function: var(--ease);
	transition-duration: 600ms;
}
html:not(.js) .fade-content, .fade-content.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Reduced motion (GM §11 + POEA additions) ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.animate-fade-in-up, .animate-fade-in { opacity: 1 !important; filter: none !important; animation: none !important; transform: none !important; }
	.fade-content { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
	.animate-pulse { animation: none !important; }
	.submit-arrow .arrow-shaft, .submit-arrow .arrow-head { transition: none; }
}

/* Mockup banner (not part of the design) */
.m-banner {
	margin: 0; padding: 10px 16px; text-align: center; font-size: 12px; line-height: 16px;
	color: var(--text-secondary); border-top: 1px solid var(--border-subtle);
}
.m-banner a { color: var(--primary-light); text-decoration: underline; }

/* 24px minimum targets for legacy tag clouds and filter labels (QA r13). */
.tagcloud a, .tag-cloud a, .wp-block-tag-cloud a { display: inline-block; min-height: 24px; line-height: 24px; }
.job_filters label { display: inline-block; min-height: 24px; line-height: 24px; }

/* 24px targets: blog "All" chip (was 17x24); legacy /jobs/ filter labels (field labels 24px, type checkbox rows 44px). */
.l-chips a { min-width: 24px; justify-content: center; padding-inline: 4px; }
.job_filters .job_types label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.job_filters .search_jobs label { display: inline-block; min-height: 24px; line-height: 24px; }