/**
 * Clasva Employer — shared provisional design tokens.
 *
 * PROVISIONAL DESIGN SYSTEM (v0.1) — see CLASVA-DESIGN-SYSTEM-v0.1.md for
 * the full documented pattern set this file and its sibling stylesheets
 * implement. This file is the single source of the color/spacing/
 * typography/container values every other Employer stylesheet consumes;
 * it is registered as a dependency of each of them (see each shortcode's
 * register_assets()), so it always loads first.
 *
 * WHY SOME RULES HERE USE `!important` (a deliberate, narrow exception,
 * not a habit): live-browser verification during this pass confirmed the
 * active public-site theme applies its own `!important` typography rules
 * directly to bare `h1`/`h2`/`h3` elements (large serif sizing, and in at
 * least one case a dark color that made Overview's "Quick actions" card
 * heading unreadable against its own dark navy background). An inherited
 * or merely-higher-specificity Employer rule cannot win against a
 * same-property `!important` rule from elsewhere on the page. The
 * `.clasva-emp-h1/h2/h3` utility classes below are the one place this
 * plugin fights back with `!important` of its own — narrowly scoped to
 * exactly the properties that were being clobbered (font-family, size,
 * weight, color, line-height, margin), applied only via these explicit
 * utility classes, never as a blanket rule.
 */

:root {
	--clasva-navy: #0f172a;
	--clasva-charcoal: #1e293b;
	--clasva-blue: #2563eb;
	--clasva-blue-dark: #1d4ed8;
	--clasva-blue-light: #eff6ff;
	--clasva-white: #ffffff;
	--clasva-gray-50: #f8fafc;
	--clasva-gray-100: #f1f5f9;
	--clasva-gray-200: #e2e8f0;
	--clasva-gray-500: #64748b;
	--clasva-gray-700: #334155;

	/* Status tokens — reused verbatim across My Jobs, Job Workspace,
	   Company Trust, Admin Moderation. Meanings are never invented here;
	   they only style the states the backend already reports. */
	--clasva-ok: #16a34a;
	--clasva-ok-bg: #dcfce7;
	--clasva-warn: #d97706;
	--clasva-warn-bg: #fef3c7;
	--clasva-fail: #dc2626;
	--clasva-fail-bg: #fee2e2;
	--clasva-neutral-bg: #e2e8f0;

	/* Job/company lifecycle status colors — one consistent mapping,
	   never redefined per page. */
	--clasva-status-draft: #64748b;
	--clasva-status-draft-bg: #e2e8f0;
	--clasva-status-pending: #2563eb;
	--clasva-status-pending-bg: #eff6ff;
	--clasva-status-published: #16a34a;
	--clasva-status-published-bg: #dcfce7;
	--clasva-status-returned: #d97706;
	--clasva-status-returned-bg: #fef3c7;

	--clasva-radius: 12px;
	--clasva-radius-sm: 8px;
	--clasva-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);

	--clasva-space-1: 0.25rem;
	--clasva-space-2: 0.5rem;
	--clasva-space-3: 0.75rem;
	--clasva-space-4: 1rem;
	--clasva-space-5: 1.5rem;
	--clasva-space-6: 2rem;
	--clasva-space-7: 3rem;

	/* One shared "wide product workspace" width for every Employer
	   surface (Overview, Company, My Jobs, Job Workspace, Messages'
	   shell wrapper). Previously each page picked its own value
	   (720px–1160px, and My Jobs at 920px) — the single most visible
	   cause of "inconsistent container widths" and wasted desktop
	   whitespace this pass was asked to fix. */
	--clasva-container: 1320px;

	--clasva-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Typography utility (see file docblock for why !important is used) ---- */

.clasva-emp-h1,
.clasva-emp-h2,
.clasva-emp-h3 {
	font-family: var(--clasva-font-sans) !important;
	color: var(--clasva-navy) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	line-height: 1.25 !important;
}

.clasva-emp-h1 { font-size: 1.6rem !important; }
.clasva-emp-h2 { font-size: 1.1rem !important; }
.clasva-emp-h3 { font-size: 1rem !important; }

/* On a dark (navy) surface — e.g. Overview's Quick Actions card. */
.clasva-emp-h1--on-dark,
.clasva-emp-h2--on-dark,
.clasva-emp-h3--on-dark {
	color: var(--clasva-white) !important;
}

@media (max-width: 600px) {
	.clasva-emp-h1 { font-size: 1.3rem !important; }
}

/* ---- Focus-visible safety net — every interactive Employer control gets
   a visible focus ring even if a page-specific rule is missing. Page
   stylesheets may still define a more specific one; this never overrides
   a component's own focus-visible rule (lower specificity, no !important). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--clasva-blue);
	outline-offset: 2px;
}