/* ==========================================================================
   Scholars Avenue — design tokens (extracted from Figma: Scholars Avenue_14/09/26)
   ========================================================================== */

/* The display face in the Figma file is "Avec", which is not a Google font.
   Drop the licensed files into assets/fonts/ and uncomment to go pixel-exact —
   every heading reads from --sa-font-display, so nothing else needs to change. */
/*
@font-face {
	font-family: 'Avec';
	src: url('../fonts/avec.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}
*/

:root {
	/* Brand */
	--sa-navy: #132653;
	--sa-navy-deep: #0C264B;
	--sa-red: #AF1D2B;
	--sa-red-bright: #ED2224;

	/* Surfaces */
	--sa-cream: #FCFBF7;
	--sa-surface: #FAFAFA;
	--sa-surface-alt: #F6F6F6;
	--sa-blue-light: #E9EDF7;
	--sa-white: #FFFFFF;

	/* Text */
	--sa-ink: #0C0407;
	--sa-ink-strong: #171717;
	--sa-text: #5E6778;
	--sa-text-muted: #5C5C5C;
	--sa-link: #002C54;

	/* Lines */
	--sa-border: #DADEE7;
	--sa-border-light: #EBEBEB;

	/* Type */
	--sa-font-display: 'Avec', 'Orbitron', 'Inter', system-ui, sans-serif;
	--sa-font-body: 'Roboto', system-ui, -apple-system, sans-serif;
	--sa-font-ui: 'Inter', system-ui, -apple-system, sans-serif;
	--sa-font-num: 'Orbitron', 'Inter', system-ui, sans-serif;
	--sa-font-accent: 'Afacad Flux', 'Inter', system-ui, sans-serif;

	/* Radii */
	--sa-r-sm: 8px;
	--sa-r-md: 14px;
	--sa-r-card: 18px;
	--sa-r-lg: 24px;
	--sa-r-xl: 32px;
	--sa-r-pill: 9999px;

	/* Elevation */
	--sa-shadow-card: 0 8px 10px rgba(0, 0, 0, .10), 0 20px 25px rgba(0, 0, 0, .10);
	--sa-shadow-float: 0 25px 50px rgba(0, 0, 0, .25);
	--sa-shadow-soft: 0 1px 1px rgba(23, 23, 23, .04), 0 3px 3px rgba(23, 23, 23, .04);

	/* Layout */
	--sa-container: 1328px;
	--sa-gutter: 24px;
	--sa-section-y: 96px;
}

/* Every section carries this top AND bottom, so the gap between two of them is
   double the value. At 96px that reads as generous on a 1440 canvas; at 56px on
   a 390px phone the same doubling came to 112px of empty cream between every
   block, which is most of a thumb-scroll of nothing. Scaled down harder here. */
@media (max-width: 1024px) {
	:root {
		--sa-section-y: 64px;
	}
}

@media (max-width: 640px) {
	:root {
		--sa-gutter: 20px;
		--sa-section-y: 36px; /* 72px between sections */
	}
}