/*
 * Apollonia design tokens.
 * Brand design tokens (--ae-* prefix).
 * Breakpoints: desktop >= 1280px, tablet 641-1279px, mobile <= 640px.
 */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-variable-latin.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: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-variable-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Base ramp */
	--ae-ink: #181a18;
	--ae-black: #09090b;
	--ae-graphite: #3a3d39;
	--ae-steel: #9c9e9b;
	--ae-fog: #d7d7d5;
	--ae-cloud: #e4e4e7;
	--ae-mist: #f4f4f5;
	--ae-white: #fff;

	/* Accent */
	--ae-signal: #00a0df;
	/* Accent as text on white/mist (WCAG AA): #00a0df gives only 2.96:1 on white. */
	--ae-signal-text: #0078a7; /* 4.95:1 on white, 4.5:1 on mist */
	/* Steel as small text on white (WCAG AA): #9c9e9b gives only 2.7:1. */
	--ae-steel-text: #6e716d; /* 5.07:1 on white, 4.6:1 on mist */
	--ae-destructive: #dc2626;

	/* Overlays on dark plates */
	--ae-on-dark-10: rgb(255 255 255 / 0.1);
	--ae-on-dark-40: rgb(255 255 255 / 0.4);

	/* Semantic aliases */
	--ae-surface-page: var(--ae-white);
	--ae-surface-muted: var(--ae-mist);
	--ae-surface-tinted: var(--ae-cloud);
	--ae-surface-inverse: var(--ae-ink);
	--ae-surface-footer: var(--ae-black);

	--ae-text-primary: var(--ae-ink);
	--ae-text-secondary: var(--ae-graphite); /* steel fails AA on white (2.6:1) */
	--ae-text-tertiary: var(--ae-steel);     /* only on dark plates or large text */
	--ae-text-inverse: var(--ae-white);
	--ae-text-inverse-muted: var(--ae-fog);

	--ae-border-light: var(--ae-fog);
	--ae-border-input: var(--ae-cloud);
	--ae-border-dark: var(--ae-graphite);

	--ae-action-fill: var(--ae-ink);
	--ae-action-fill-hover: var(--ae-signal);
	--ae-action-foreground: var(--ae-white);
	--ae-action-foreground-hover: var(--ae-ink);

	/* Spacing scale */
	--ae-space-2: 2px;
	--ae-space-4: 4px;
	--ae-space-6: 6px;
	--ae-space-8: 8px;
	--ae-space-10: 10px;
	--ae-space-12: 12px;
	--ae-space-16: 16px;
	--ae-space-20: 20px;
	--ae-space-24: 24px;
	--ae-space-36: 36px;
	--ae-space-44: 44px;
	--ae-space-64: 64px;
	--ae-space-80: 80px;
	--ae-space-96: 96px;
	--ae-space-144: 144px;
	--ae-space-192: 192px;

	/* Layout (desktop values; tablet/mobile overrides below) */
	--ae-content-max: 1632px;
	--ae-gutter: 144px;
	--ae-section-pad: 144px;
	--ae-section-gap: 96px;
	--ae-block-gap: 44px;
	--ae-header-bar: 56px;
	--ae-header-height: 80px;

	/* Radii */
	--ae-radius-none: 0;
	--ae-radius-input: 8px;
	--ae-radius-textarea: 6px;
	--ae-radius-pill: 9999px;

	/* Notch (corner cut) */
	--ae-notch-lg: 26px;
	--ae-notch-md: 15px;
	--ae-notch-sm: 8px;

	/* Elevation */
	--ae-shadow-ring-light: inset 0 0 0 1px var(--ae-fog);
	--ae-shadow-ring-input: inset 0 0 0 1px var(--ae-cloud);
	--ae-shadow-bar: 0 4px 12px -2px rgb(21 21 21 / 0.12);

	/* Motion */
	--ae-ease: cubic-bezier(0.2, 0, 0, 1);
	--ae-duration-fast: 120ms;
	--ae-duration-base: 180ms;
	--ae-duration-slow: 320ms;

	/* Typography */
	--ae-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ae-tracking-tight: -0.05em;

	/*
	 * Fluid sizes: desktop / tablet / mobile values -> clamp(mobile, vw, desktop).
	 * The vw factor is chosen so the size lands near the tablet value at 834px.
	 */
	--ae-fs-display-home: clamp(34px, 7.2vw, 96px);     /* desktop / tablet / mobile: 96 / 60 / 34 */
	--ae-fs-display-program: clamp(30px, 6.24vw, 84px);  /* desktop / tablet / mobile: 84 / 52 / 30 */
	--ae-fs-h2: clamp(28px, 5.76vw, 72px);               /* desktop / tablet / mobile: 72 / 48 / 28 */
	--ae-fs-h2-small: clamp(26px, 4.3vw, 48px);         /* desktop / tablet / mobile: 48 / 36 / 26 */
	--ae-fs-h3: clamp(19px, 2.64vw, 24px);              /* desktop / tablet / mobile: 24 / 22 / 19 */
	--ae-fs-num: clamp(40px, 6.7vw, 72px);              /* desktop / tablet / mobile: 72 / 56 / 40 */
	--ae-fs-lead: clamp(16px, 2.4vw, 24px);             /* desktop / tablet / mobile: 24 / 20 / 16 */
	--ae-fs-watermark: clamp(130px, 31vw, 500px);       /* desktop / tablet / mobile: 500 / 260 / 130 */

	/* Inner pages (About, programs) */
	--ae-fs-h2-inner: clamp(26px, 5.28vw, 64px);        /* desktop / tablet / mobile: 64 / 44 / 26 */
	--ae-fs-h3-inner: clamp(18px, 2.52vw, 24px);        /* desktop / tablet / mobile: 24 / 21 / 18 */
	--ae-fs-num-inner: clamp(36px, 5.76vw, 64px);       /* desktop / tablet / mobile: 64 / 48 / 36 */
	--ae-fs-lead-inner: clamp(16px, 2.28vw, 22px);      /* desktop / tablet / mobile: 22 / 19 / 16 */
	--ae-fs-display-about: clamp(28px, 4.7vw, 60px);    /* desktop / tablet / mobile: 60 / 48 / 28 */
	--ae-fs-display-page: clamp(28px, 5.76vw, 72px);    /* desktop / tablet / mobile: 72 / 48 / 28 FAQ, Contact, legal */
	--ae-fs-title-lg: clamp(20px, 3.12vw, 32px);        /* desktop / tablet / mobile: 32 / 26 / 20 tab panel titles, contact lines */
	--ae-fs-num-sm: clamp(16px, 2.4vw, 24px);           /* desktop / tablet / mobile: 24 / 20 / 16 small "/01" */
	--ae-fs-h3-faq: clamp(16px, 2.16vw, 20px);          /* desktop / tablet / mobile: 20 / 18 / 16 FAQ page questions */
}

@media (max-width: 1279px) {
	:root {
		--ae-gutter: 36px;
		--ae-section-pad: 96px;
		--ae-section-gap: 64px;
		--ae-block-gap: 24px;
	}
}

@media (max-width: 640px) {
	:root {
		--ae-gutter: 16px;
		--ae-section-pad: 56px;
		--ae-section-gap: 40px;
		--ae-block-gap: 20px;
	}
}