/* BUILD 2026-redesign-1029_3 */
/* ===================================================================== SLCC 2026 Redesign — Design tokens ALIGNED TO THE SLCC BRAND IDENTITY GUIDE (received 2026-09-15). Supersedes the consultant's variables.css. Variable NAMES are kept so every existing rule keeps working;
 only the VALUES changed. ACCESSIBILITY RULE FOR THIS PROJECT: every text/background pairing must meet WCAG 2.1 AA — 4.5:1 for normal text, 3:1 for large text (24px+, or 19px+ bold) and for UI borders and focus indicators. No exceptions. Contrast ratios are recorded beside each token. Re-check on any change. THE ONE APPROVED DEVIATION FROM THE GUIDE'S HEX VALUES: SLCC Blue #008DC5 is only 3.74:1 on white, so it fails AA for text and fails as a background behind white text. --primary-color is a darkened SLCC Blue at the same hue (197 deg) and saturation (100%), lightness 38.6% -> 32.5%. It reads as the same blue and clears AA at 5.01:1. True #008DC5 is kept as --brand-blue for non-text use only. ===================================================================== */
 :root {
	/* ---------- Brand truth: exact guide values ---------- */
	 --brand-blue: #008DC5;
	/* SLCC Blue, PMS 3005. 3.74:1 on white - NEVER behind or as text. Logo, large graphics, decorative fills only. */
	 --brand-gold: #FACF0A;
	/* SLCC Gold, PMS 116 */
	 --granite-gray: #707379;
	/* Granite Gray, Cool Gray 9. 4.75:1 on white. Guide: body text, lines, icons, borders, secondary elements. NOTE: guide's RGB 114-118-121 is #727679, which does not match its hex. Using the hex. Confirm with IMC. */
	/* ---------- AA-safe blue ramp, derived from SLCC Blue ---------- */
	 --primary-color: #0077A6;
	/* 5.01:1 on white - text AND surfaces */
	 --primary-hover: #00648C;
	/* 6.56:1 on white */
	 --primary-active: #005475;
	/* 8.32:1 on white */
	 --primary-darker: #00445E;
	/* 10.56:1 on white */
	 --primary-deep: #003A52;
	/* 12.16:1 on white - dark surfaces */
	 --primary-secondary-color: #00648C;
	 --primary-alert: rgba(112, 115, 121, 0.10);
	 --primary-alert-border: rgba(112, 115, 121, 0.30);
	/* ---------- Legacy consultant names, remapped to brand ---------- */
	 --dark-blue: #003A52;
	 --navy-blue: #003A52;
	/* dark surfaces + heading ink */
	 --accent-blue: #008DC5;
	/* decorative only (= --brand-blue) */
	 --alt-light-blue-color: #0077A6;
	 --light-blue: #D9DADC;
	/* 1.40:1 - decorative rules/dividers only, never a text pairing. 1029_3: neutral gray; was baby blue #CFE7F0 (VP: no baby blue). Name kept. */
	 --yellow: #FACF0A;
	 --yellow-light: #FFF0A8;
	 --announcement-bar-color: #FACF0A;
	 --brown: #707379;
	/* = --granite-gray */
	 --white: #FFF;
	 --black: #000;
	 --gray-light: #E4E4E4;
	 --fast-facts-bg-color: #F4F5F6;
	/* soft band - neutral Granite tint (1029_3; was baby blue #EAF6FA). --band-ink 11.14, --body-ink 7.41, --primary-active 7.62, --primary-hover 6.01, --primary-color 4.59 (the darkest this tint can go) */
	/* ---------- Semantic text tokens ---------- */
	 --body-ink: #4D5056;
	/* darkened Granite: 8.09 on white, 7.41 on --fast-facts-bg-color */
	 --heading-ink: #003A52;
	/* 12.16:1 on white */
	 --band-ink: #003A52;
	/* 11.14:1 on --fast-facts-bg-color */
	 --on-deep: #FFF;
	/* 12.16:1 on --primary-deep */
	 --on-deep-muted: #DCDEE0;
	/* 9.01:1 on --primary-deep - labels (1029_3: neutral; was baby blue #CFE7F0, 9.46) */
	 --on-gold: #003A52;
	/* 8.10:1 on gold. Primary blue on gold is only 3.34:1 - do not use it. */
	/* ---------- Focus indicators (3:1 minimum vs their backdrop) -------- */
	 --focus-ring: #003A52;
	/* 12.16:1 on white */
	 --focus-ring-on-dark: #FACF0A;
	/* 8.10:1 on deep, 3.34:1 on primary */
	/* ---------- Rules and tints on dark surfaces ---------- */
	 --rule-on-dark: rgba(255, 255, 255, 0.30);
	 --rule-on-dark-soft: rgba(255, 255, 255, 0.18);
	 --tint-on-dark: rgba(255, 255, 255, 0.10);
	 --tint-on-dark-strong: rgba(255, 255, 255, 0.20);
	/* ---------- Typography (guide section 02.5) ---------- */
	 --font-sans: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
	 --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;
	 --tracking-display: -0.02em;
	/* H1: -2% to -5% */
	 --tracking-heading: -0.015em;
	/* H2/H3: -5% nominal, eased for screen */
	 --tracking-label: -0.01em;
	/* ---------- Overlays and shadows ---------- */
	 --overlay-blue: rgba(0, 58, 82, 0.8);
	 --overlay-blue-multiply: #003A52;
	 --overlay-blue-opacity: 0.71;
	 --overlay-multiply-opacity: 0.53;
	 --overlay-dark-gradient: transparent linear-gradient(180deg, #00000000 0%, #000000D1 61%, #000000 100%);
	 --overlay-instagram-gradient: transparent linear-gradient(180deg, #5A5A5A00 0%, #141414 81%, #121212 100%);
	 --shadow-card: 0px 0px 45px rgba(0, 0, 0, 0.24);
	 --dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	/* ---------- School identity colors (guide section 02.4) ------------ Applied per school on Program Pages. Each has an -ink companion for text use: Health Aqua and Tech Orange fail AA on white as authored, so text uses the darkened -ink value at the same hue. The authored value stays for stripes, rules and markers (non-text). */
	 --school-humanities: #17296A;
	 --school-humanities-ink: #17296A;
	/* 13.45:1 */
	 --school-business: #2566AD;
	 --school-business-ink: #2566AD;
	/* 5.86:1 */
	 --school-stem: #0F635E;
	 --school-stem-ink: #0F635E;
	/* 7.08:1 */
	 --school-health: #44B8AB;
	 --school-health-ink: #2D7B72;
	/* 5.01 on white, 4.59 on #F4F5F6 */
	 --school-tech: #E06837;
	 --school-tech-ink: #C9501F;
	/* 3.38 -> 4.52:1 */
	/* Defaults;
	 a school class on .program overrides these */
	 --school-accent: var(--brand-blue);
	 --school-accent-ink: var(--primary-color);
	/* ---------- Quick actions (SIDE CALLOUTS) ---------- */
	 --rule-on-gold: rgba(0, 58, 82, 0.25);
	/* tile dividers - decorative */
	 --callout-rail-width: 170px;
	/* fixed-tab rail at 1700px and up. Held explicitly so the rail can never outgrow its clearance: at 1700px the natural gutter is (1700 - 1320) / 2 = 190px, so this leaves 20px. Raising it means raising the 1700px breakpoint to match. */
	/* ---------- Bootstrap bridge ---------- */
	 --bs-primary: #0077A6;
	 --bs-primary-rgb: 0, 119, 166;
}
/* ===================================================================== Component token overrides ===================================================================== */
 .btn-primary {
	 --bs-btn-bg: var(--primary-color);
	 --bs-btn-border-color: var(--primary-color);
	 --bs-btn-color: var(--white);
	 --bs-btn-hover-bg: var(--primary-hover);
	 --bs-btn-hover-border-color: var(--primary-hover);
	 --bs-btn-hover-color: var(--white);
	 --bs-btn-active-bg: var(--primary-active);
	 --bs-btn-active-border-color: var(--primary-active);
	 --bs-btn-active-color: var(--white);
	 --bs-btn-disabled-bg: var(--primary-color);
	 --bs-btn-disabled-border-color: var(--primary-color);
}
/* Gold buttons carry deep blue text, not primary blue: primary on gold is 3.34:1 and fails AA. Deep blue on gold is 8.10:1. */
 .btn-yellow {
	 --bs-btn-bg: var(--yellow);
	 --bs-btn-border-color: var(--yellow);
	 --bs-btn-hover-bg: #E0B909;
	 --bs-btn-hover-border-color: #E0B909;
	 --bs-btn-active-bg: #C7A408;
	 --bs-btn-active-border-color: #C7A408;
	 --bs-btn-disabled-bg: var(--yellow);
	 --bs-btn-disabled-border-color: var(--yellow);
	 --bs-btn-color: var(--on-gold);
	 --bs-btn-hover-color: var(--on-gold);
	 --bs-btn-active-color: var(--on-gold);
}
 .bg-primary {
	 background-color: var(--primary-color) !important;
}
 .text-primary {
	 color: var(--primary-color) !important;
}
 .border-primary {
	 border-color: var(--primary-color) !important;
}
 .link-primary {
	 color: var(--primary-color) !important;
}
 .link-primary:hover, .link-primary:focus {
	 color: var(--primary-hover) !important;
}
 .btn-outline-primary {
	 --bs-btn-color: var(--primary-color);
	 --bs-btn-border-color: var(--primary-color);
	 --bs-btn-hover-bg: var(--primary-color);
	 --bs-btn-hover-border-color: var(--primary-color);
	 --bs-btn-hover-color: var(--white);
	 --bs-btn-active-bg: var(--primary-active);
	 --bs-btn-active-border-color: var(--primary-active);
	 --bs-btn-active-color: var(--white);
}
 .badge.bg-primary {
	 background-color: var(--primary-color) !important;
}
 .alert-primary {
	 --bs-alert-bg: var(--primary-alert);
	 --bs-alert-border-color: var(--primary-alert-border);
	 --bs-alert-color: var(--primary-active);
}
 .text-on-gold, a.text-on-gold {
	/* Text sitting on SLCC Gold. 8.10:1. Bootstrap's .text-primary on gold is only 3.34:1 and fails AA - use this instead. */
	 color: var(--on-gold) !important;
}
 .arrow-btn {
	 font-size: 20px;
	 color: var(--navy-blue);
	 min-width: 166px;
}