/* BHIS PTA design tokens. Source: Figma file EetnYDq5mzFA76d8U4lfLd, read Oct 21 2026.
   Primitives and all four semantic modes were verified against Figma. */

:root {
	/* Primitives */
	--navy-50:#f8f8f9; --navy-100:#eef0f2; --navy-200:#dde0e5; --navy-300:#c5cad2; --navy-400:#a9afbb;
	--navy-500:#8790a1; --navy-600:#657287; --navy-700:#44536c; --navy-800:#273856; --navy-900:#0f2243; --navy-950:#081325;
	--yellow-50:#fff9e5; --yellow-100:#fff4cc; --yellow-200:#ffea9e; --yellow-300:#ffdf6b; --yellow-400:#ffd233;
	--yellow-500:#ffc700; --yellow-600:#e7b200; --yellow-700:#cb9b00; --yellow-800:#ad8200; --yellow-900:#906900;
	--cream-50:#fcfaf7; --cream-100:#f9f5ee; --cream-200:#f0ebe3; --cream-300:#e6e1d9; --cream-400:#d9d3ca;
	--cream-500:#c6bfb4; --cream-600:#ada599; --cream-700:#918779; --cream-800:#716555; --cream-900:#534533;
	--tiger-50:#fdf3ed; --tiger-100:#fae6dc; --tiger-200:#f5ceb9; --tiger-300:#efb291; --tiger-400:#e88d5c;
	--tiger-500:#e06523; --tiger-600:#c6571d; --tiger-700:#ad4916; --tiger-800:#923b10; --tiger-900:#772c09;
	--green-50:#f2f8f2; --green-100:#e4f1e5; --green-200:#c8e4cb; --green-300:#9ed1a2; --green-400:#6bbd72;
	--green-500:#44a74c; --green-600:#328639; --green-700:#266d2c; --green-800:#1f5a26; --green-900:#164119; --green-950:#0c270e;
	--white:#ffffff; --white-10:#ffffff1a; --white-20:#ffffff33; --white-60:#ffffff99; --white-80:#ffffffcc;
	--navy-alpha-75:#0f2243bf; --navy-alpha-20:#0f224333; --navy-alpha-10:#0f22431a;

	/* Fonts: loaded from fonts.css (self-hosted). */
	--font-heading:"Young Serif", Georgia, "Noto Serif SC", "Songti SC", serif;
	--font-body:"Familjen Grotesk", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;

	/* Mode-independent */
	--accent-bg:var(--yellow-500); --accent-text:var(--navy-900);
	--progress-track:var(--cream-300); --progress-fill:var(--navy-900);
	--chip-bg:var(--white); --chip-text:var(--navy-900); --chip-outline-border:var(--navy-900);
	--bg-footer:var(--navy-950);

	/* Text lockup spacing: eyebrow > H2 > lede. Used by inner.css and home.css. */
	--lockup-eyebrow-gap:12px; --lockup-gap:16px; --section-head-gap:40px;

	/* Tags */
	--tag-school-bg:var(--tiger-200); --tag-school-text:var(--tiger-900);
	--tag-pta-bg:var(--yellow-300); --tag-pta-text:var(--navy-900);
	--tag-fundraiser-bg:var(--green-200); --tag-fundraiser-text:var(--green-900);
	--tag-closure-bg:var(--navy-300); --tag-closure-text:var(--navy-900);
	--tag-featured-bg:var(--navy-900); --tag-featured-text:var(--cream-100);
	--tag-outline-border:var(--navy-900); --tag-outline-text:var(--navy-900);
}

/* Semantic tokens: default is "On white". Add one surface class to a Divi section to switch modes. */
:root, .surface-white {
	--bg-section:var(--white); --bg-card:var(--cream-100);
	--text-primary:var(--navy-900); --text-secondary:var(--navy-alpha-75);
	--text-link:var(--navy-900); --text-link-hover:var(--tiger-700);
	--text-accent:var(--tiger-700); --text-eyebrow:var(--navy-900);
	--border-subtle:var(--navy-alpha-20); --rule-hairline:var(--navy-alpha-10); --border-strong:var(--navy-900);
	--focus-ring:var(--navy-900);
	--button-primary-bg:var(--navy-900); --button-primary-text:var(--white);
	--button-secondary-border:var(--navy-900); --button-secondary-text:var(--navy-900);
}
.surface-cream {
	--bg-section:var(--cream-100); --bg-card:var(--white);
	--button-primary-text:var(--cream-100);
}
.surface-navy {
	--bg-section:var(--navy-900); --bg-card:var(--cream-100);
	--text-primary:var(--cream-100); --text-secondary:var(--white-80);
	--text-link:var(--yellow-500); --text-link-hover:var(--yellow-300);
	--text-accent:var(--tiger-500); --text-eyebrow:var(--yellow-500);
	--border-subtle:var(--white-20); --rule-hairline:var(--white-10); --border-strong:var(--white-60);
	--focus-ring:var(--yellow-500);
	--button-primary-bg:var(--yellow-500); --button-primary-text:var(--navy-900);
	--button-secondary-border:var(--cream-100); --button-secondary-text:var(--cream-100);
}
.surface-yellow {
	--bg-section:var(--yellow-500); --bg-card:var(--white);
	--text-link-hover:var(--navy-950); --text-accent:var(--tiger-900);
	--button-primary-bg:var(--navy-900); --button-primary-text:var(--yellow-500);
}
.surface-white, .surface-cream, .surface-navy, .surface-yellow {
	background-color:var(--bg-section); color:var(--text-primary);
}

/* Primary buttons: the label takes the color of whatever the button sits on (white, cream, yellow, or navy).
   Sections set this through their surface class. Cards sit on a different color than their section, so they set it to their own background. */
.bhis-way, .bhis-joincard, .bhis-card3, .bhis-step, .bhis-banner, .bhis-sc-card, .bhis-os-card, .bhis-os-steps, .bhis-doc-card, .bhis-join-card,
.bhis-sw-card, .bhis-level, .bhis-infocard, details.bhis-class, .bhis-notice, .bhis-drivecard, .bhis-tile, .bhis-upc__featured, fieldset.bhis-qcard { --button-primary-text: var(--bg-card); }
.bhis-ways--four .bhis-way, .bhis-ways--three .bhis-way { --button-primary-text: var(--cream-100); }
.bhis-yb-send { --button-primary-text: var(--yellow-500); }