/* ==========================================================================
   Design tokens: the one place to change colours, fonts and sizes.

   Light values are defined first. Dark values are repeated twice: once for
   the visitor's OS setting, once for the header toggle (data-theme="dark"),
   so the toggle wins in both directions. Keep the two dark blocks identical.

   Contrast ratios (WCAG 2.1) are noted for text pairs. AA needs 4.5:1 for
   normal text, 3:1 for large text and UI borders.
   ========================================================================== */

:root {
	/* Surfaces */
	--color-bg: #F6F7F9;
	--color-surface: #FFFFFF;

	/* Text */
	--color-text: #1A2233;
	/* 15.9:1 on surface, 14.8:1 on bg */
	--color-text-muted: #4A5568;
	/* 7.5:1 on surface, 7.0:1 on bg */
	--color-heading: #0B2545;
	/* 15.4:1 on surface */

	/* Brand */
	--color-primary: #0B2545;
	/* deep navy */
	--color-primary-strong: #071A33;
	/* utility bar, footer, hero overlay */
	--color-accent: #6D28D9;
	/* violet: links, buttons. 7.1:1 on surface */
	--color-accent-hover: #5B21B6;
	--color-on-accent: #FFFFFF;
	/* 7.1:1 on accent */
	--color-accent-soft: rgb(109 40 217 / 0.10);
	--color-accent-on-dark: #B9A2FF;
	/* violet on navy: 8.0:1 on primary-strong */

	/* Text on the navy bands (utility bar, hero, footer) */
	--color-on-dark: #FFFFFF;
	--color-on-dark-muted: #DDE5F0;
	/* 15.0:1 on primary-strong */

	/* Lines and focus */
	--color-border: #808DA0;
	/* 3.4:1 on surface (UI borders) */
	--color-border-subtle: #E2E6EC;
	/* decorative dividers only */
	--color-focus: var(--color-accent);

	/* Status */
	--color-closed-bg: #F6E3E3;
	--color-closed-text: #5B2A2A;
	/* 9.4:1 */

	/* Partner logos sit on white cards in both modes */
	--color-logo-card: #FFFFFF;
	--color-logo-card-text: #4A5568;
	/* 7.5:1 */

	/* Shadows */
	--shadow-card: 0 1px 2px rgb(7 26 51 / 0.05), 0 6px 18px rgb(7 26 51 / 0.06);
	--shadow-raised: 0 16px 40px rgb(7 26 51 / 0.16);
	--shadow-header: 0 4px 14px rgb(7 26 51 / 0.08);

	/* Hero photo and overlay */
	--hero-overlay-rgb: 7 26 51;
	/* navy, as R G B */
	--hero-overlay-strength: 0.61;
	/* overall darkness of the photo: the one knob */
	--hero-text-floor: 0.72;
	/* min darkness behind text: white 7.0:1, violet 3.2:1 (large), muted 5.5:1 */
	--hero-photo-saturation: 0.55;
	--hero-photo-position: 50% 58%;
	/* focal point of the photo */
	--hero-card-overlap: 72px;
	/* how far the Important Dates card overlaps the hero */
	--page-header-overlay: 0.84;
	/* darkness of the photo in the inner page header band (white text 10:1+) */
	--quanta-blue: 150 214 255;
	/* hero atoms (R G B), read by assets/js/quanta.js */
	--quanta-blue-glow: 56 140 255;
	--quanta-violet: 205 186 255;
	--quanta-violet-glow: 124 77 255;

	/* Typography */
	--font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1.0625rem;
	--text-lg: 1.25rem;
	--text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

	/* Layout */
	--container: 1320px;
	--content-width: 820px;
	/* text column of inner pages */
	--gutter: 24px;
	--radius: 6px;
	--radius-lg: 10px;
	--section-space: clamp(48px, 7vw, 88px);
}

@media (max-width: 600px) {
	:root {
		--gutter: 16px;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-bg: #0B1424;
		--color-surface: #14213A;
		--color-text: #E6EBF2;
		/* 15.4:1 on bg, 13.4:1 on surface */
		--color-text-muted: #A7B3C6;
		/* 8.7:1 on bg, 7.6:1 on surface */
		--color-heading: #D6E4F5;
		--color-accent: #B9A2FF;
		/* 10.0:1 on bg, 8.7:1 on surface */
		--color-accent-hover: #CDBBFF;
		--color-on-accent: #0B1424;
		/* 10.0:1 on accent */
		--color-accent-soft: rgb(185 162 255 / 0.14);
		--color-border: #6B7C97;
		/* 3.8:1 on surface */
		--color-border-subtle: #22314D;
		--color-closed-bg: #3A1F26;
		--color-closed-text: #F2C9C9;
		/* 9.9:1 */
		--shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);
		--shadow-raised: 0 16px 40px rgb(0 0 0 / 0.45);
		--shadow-header: 0 4px 14px rgb(0 0 0 / 0.35);
		--hero-overlay-strength: 0.66;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--color-bg: #0B1424;
	--color-surface: #14213A;
	--color-text: #E6EBF2;
	--color-text-muted: #A7B3C6;
	--color-heading: #D6E4F5;
	--color-accent: #B9A2FF;
	--color-accent-hover: #CDBBFF;
	--color-on-accent: #0B1424;
	--color-accent-soft: rgb(185 162 255 / 0.14);
	--color-border: #6B7C97;
	--color-border-subtle: #22314D;
	--color-closed-bg: #3A1F26;
	--color-closed-text: #F2C9C9;
	--shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);
	--shadow-raised: 0 16px 40px rgb(0 0 0 / 0.45);
	--shadow-header: 0 4px 14px rgb(0 0 0 / 0.35);
	--hero-overlay-strength: 0.66;
	color-scheme: dark;
}