/**
 * MSAD 2026 redesign -- GLOBAL design tokens + webfonts.
 *
 * Loaded SITE-WIDE (see inc/msad-2026.php), so every page -- including pages
 * built in the Bricks builder -- can reference these variables directly, e.g.
 * background: var(--brand-accent). This is the global style source of truth
 * for the redesign; Bricks' own Theme Styles UI stays untouched (its layouts
 * and styles live in the DB and the handoff warns against scripting them).
 *
 * STRICTLY ADDITIVE. Four handoff token names are deliberately ABSENT because
 * Bricks' style-manager.min.css already defines them with different values,
 * and redefining them on :root would restyle all ~41 existing pages:
 *
 *   --text-body      (#555555 site-wide; redesign uses #3b3f47, scoped)
 *   --surface-page   (#eeeeee site-wide; redesign uses #ffffff, scoped)
 *   --border-default (#dee2e6 site-wide; redesign uses #ecebe5, scoped)
 *   --text-s/--text-m (redesign swaps them; swap stays scoped)
 *
 * Those live as --h26-* variables scoped to .msad-h26 in msad-2026.css.
 * Promote them here only when the redesign covers the whole site.
 *
 * --brand-primary (#1b2d59) and --brand-secondary (#2E7D32) already exist in
 * style-manager.min.css with identical values, so they are not repeated.
 */

/* ---------------------------------------------------------------------------
   Webfonts -- self-hosted (SIL Open Font License), latin subset.
   Declarations are global; a face only downloads on pages that actually use
   it, so this costs the old Bricks pages nothing.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-grotesk-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-800.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Tokens (Direction C -- yellow accent, green on light, cranberry edges only,
   Space Grotesk / Hanken Grotesk)
   --------------------------------------------------------------------------- */

:root {
	/* green -- strips only: section heading rules and the footer stripe band.
	   Nothing else. --brand-secondary-50/100/300 and --brand-accent-100 are
	   tint leftovers from an earlier direction; kept (not deleted) but no
	   longer used by design -- see revision-prompt Step 1/8. */
	--brand-secondary-50: #E8F1EA;
	--brand-secondary-100: #D3E7DB;
	--brand-secondary-300: #6FA98A;
	--brand-secondary-700: #245C40; /* deep green: section rule hover, if ever needed */

	/* accent -- yellow: every accent on a navy background. Nothing else. */
	--brand-accent: #5FE08F;
	--brand-accent-100: #FDF1C9; /* tint -- unused, see above */
	--brand-accent-700: #DCAE10; /* hover */
	--on-accent: #ffffff; /* buttons are red-filled now; white on cranberry is 8.6:1 */

	/* accent used on navy backgrounds -- yellow owns the dark half (rule 2).
	   Pointing this at --brand-accent means every existing on-navy rule
	   updates automatically and keeps its semantic meaning. */
	--accent-on-navy: var(--brand-accent);

	/* cranberry -- red owns the light half (rule 3): buttons, icons, arrows,
	   links, badges on white or grey. Never on navy (1.5:1, unreadable). */
	--brand-cranberry: #B23457;
	--brand-cranberry-700: #922C49; /* hover / pressed; reads brown at small
		sizes and near-black in thin marks, so it's the dark end only */
	--brand-bay-blue: #14558F; /* footer stripe only */

	/* blue -- light "soft band" background, replacing brand-secondary-50/100
	   (E8F1EA/D3E7DB) on: news card meta, board callout, awards filter nav,
	   award "most recent" card, contact legislation card, article category pill.
	   Same lightness step as the green tints, hue from --brand-bay-blue. */
	--brand-bay-blue-50: #e8eef4;
	--brand-bay-blue-100: #d0dde9;

	/* form validation only -- keep distinguishable from cranberry */
	--color-danger: #CD0D0D;

	/* text + surfaces (additive names only -- see header comment) */
	--text-muted: #526079; /* meta/captions -- 6.1:1, keep >= 14px */
	--surface-band: #F7F8FA; /* alternating section band -- neutral, not tinted */
	--border-soft: #e4e2da; /* hairlines */
	--surface-band-border: #eceff4;

	/* type */
	--font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;

	/* spacing */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-s: 12px;
	--space-m: 16px;
	--space-l: 24px;
	--space-xl: 40px;
	--space-2xl: 64px;
	--space-3xl: 96px;

	/* motion + focus */
	--transition-fast: 140ms ease;
	--focus-ring: 3px solid var(--brand-cranberry); /* at 3px offset; never removed */

	/* readable aliases -- aliases only, existing rules keep using the --brand-* names above */
	--green: var(--brand-secondary);
	--green-deep: var(--brand-secondary-700);
	--yellow: var(--brand-accent);
	--yellow-hover: var(--brand-accent-700);
	--cranberry: var(--brand-cranberry);
	--cranberry-deep: var(--brand-cranberry-700);
	--navy: var(--brand-primary);
}

/* Dark-context override: keep focus rings visible against navy sections.
   Cranberry is unreadable on navy (rule 3), so navy sections get the
   on-navy accent (yellow) instead. */
.msad-h26__hero,
.msad-h26__mission,
.msad-h26__announce-card,
.msad-h26__page-hero,
#brxe-ba2577 {
	--focus-ring: 3px solid var(--brand-accent);
}