/*
 * Design tokens and base typography.
 * Loaded after Bootstrap and before style.css, so every page shares one source
 * of truth for colours, type, radii and shadows.
 */

/* Fonts: self-hosted variable fonts (SIL OFL, see assets/fonts/*-OFL.txt), latin subset. */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/fraunces-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/fraunces-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Brand colours */
	--color-navy: #081A3E;
	--color-navy-light: #0C2149;
	--color-teal: #399499;
	--color-teal-light: #4BB4B7;
	--color-orange: #F48528;
	--color-orange-light: #FF9A45;
	--color-yellow: #FFC224;
	--color-cream: #FBF7F0;
	--color-white: #FFFFFF;

	/* Text */
	--color-text: var(--color-navy);
	--color-text-muted: #45526E;
	--color-text-on-dark: #FFFFFF;
	--color-text-on-dark-muted: #C9D3E6;

	/* Typography */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Shape */
	--radius-sm: 10px;
	--radius-md: 20px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* Elevation */
	--shadow-sm: 0 1px 3px rgba(8, 26, 62, .12);
	--shadow-md: 0 10px 30px -12px rgba(8, 26, 62, .35);
	--shadow-lg: 0 30px 60px -20px rgba(8, 26, 62, .5);

	/* Bootstrap hooks */
	--bs-body-font-family: var(--font-body);
}

body {
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}

:focus-visible {
	outline: 3px solid var(--color-teal-light);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}