/**
 * Design tokens — Miami School Advisors
 * Estética académica y formal: teales del logo, neutros cálidos, sin
 * naranja/terracota ni blanco/negro puros. Tipografía Radley + Carlito.
 */

:root {
	/* Paleta de marca */
	--msa-color-teal: #226175;
	--msa-color-turquoise: #219aa1;
	--msa-color-deep-blue: #266076;
	--msa-color-navy: #1d3b4d;
	--msa-color-teal-light: #6ebac0;
	--msa-color-teal-muted: #3d7a88;

	--msa-color-teal-hover: #17414f;
	--msa-color-turquoise-hover: #187a80;
	--msa-color-navy-deep: #143440;
	--msa-color-ink-soft: rgb(28 54 64 / 72%);

	--msa-color-ink: #1c3640;
	--msa-color-linen: #fdfaf9;
	--msa-color-linen-alt: #f5f2ee;
	--msa-color-paper: #fffcf9;
	--msa-color-ivory: #f7f2ec;
	--msa-color-stone: #e2dcd4;

	/* Roles semánticos */
	--msa-color-bg: var(--msa-color-linen);
	--msa-color-bg-alt: var(--msa-color-linen-alt);
	--msa-color-bg-dark: var(--msa-color-navy-deep);
	--msa-color-bg-paper: var(--msa-color-paper);

	--msa-color-text: var(--msa-color-ink);
	--msa-color-text-muted: var(--msa-color-ink-soft);
	--msa-color-text-on-dark: var(--msa-color-ivory);
	--msa-color-text-on-dark-muted: rgb(247 242 236 / 74%);

	--msa-color-primary: var(--msa-color-teal);
	--msa-color-primary-hover: var(--msa-color-teal-hover);
	--msa-color-primary-soft: var(--msa-color-teal-light);

	--msa-color-secondary: var(--msa-color-turquoise);
	--msa-color-secondary-hover: var(--msa-color-turquoise-hover);

	/* CTAs y acentos — solo familia teal, nunca naranja */
	--msa-color-accent: var(--msa-color-turquoise);
	--msa-color-accent-hover: var(--msa-color-turquoise-hover);
	--msa-color-highlight: var(--msa-color-teal-muted);

	--msa-color-border: rgb(28 54 64 / 14%);
	--msa-color-border-strong: rgb(34 97 117 / 28%);
	--msa-color-border-on-dark: rgb(247 242 236 / 16%);

	/* Tipografía */
	--msa-font-heading: "Radley", Georgia, "Times New Roman", serif;
	--msa-font-body: "Carlito", Calibri, "Segoe UI", Arial, sans-serif;

	--msa-font-size-eyebrow: 0.75rem;
	--msa-font-size-sm: 0.9375rem;
	--msa-font-size-base: 1rem;
	--msa-font-size-lg: 1.1875rem;
	--msa-font-size-xl: 1.625rem;
	--msa-font-size-2xl: clamp(1.875rem, 3.8vw, 2.625rem);
	--msa-font-size-3xl: clamp(2.375rem, 5vw, 3.5rem);
	--msa-font-size-display: clamp(2.75rem, 6vw, 4.25rem);

	--msa-letter-spacing-eyebrow: 0.14em;
	--msa-letter-spacing-heading: 0.015em;
	--msa-letter-spacing-tight: -0.01em;
	--msa-line-height-heading: 1.12;
	--msa-line-height-body: 1.72;

	/* Espaciado */
	--msa-space-2xs: 8px;
	--msa-space-xs: 12px;
	--msa-space-sm: 20px;
	--msa-space-md: 32px;
	--msa-space-lg: 56px;
	--msa-space-xl: 80px;
	--msa-space-2xl: 112px;

	--msa-section-padding-y: clamp(40px, 5vw, 72px);

	--msa-container-padding: clamp(20px, 5vw, 64px);
	--msa-container-max: 1280px;

	/* Bordes — sutiles, no pill */
	--msa-radius-xs: 2px;
	--msa-radius-sm: 3px;
	--msa-radius-md: 4px;
	--msa-radius-lg: 6px;
	--msa-radius-xl: 8px;
	--msa-radius-pill: 4px;

	--msa-transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
	--msa-transition-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);
	--msa-shadow-soft: 0 8px 28px rgb(28 54 64 / 8%);
	--msa-shadow-medium: 0 16px 40px rgb(28 54 64 / 12%);
	--msa-shadow-dark: 0 24px 48px rgb(10 24 30 / 28%);
	--msa-shadow-inset: inset 0 1px 0 rgb(247 242 236 / 6%);

	--msa-gradient-teal-deep: linear-gradient(165deg, #24596b 0%, #143440 100%);
	--msa-gradient-hero-overlay: linear-gradient(105deg, rgb(20 52 64 / 88%) 0%, rgb(20 52 64 / 62%) 42%, rgb(20 52 64 / 18%) 100%);
	--msa-gradient-overlay-bottom: linear-gradient(180deg, rgb(20 40 48 / 0%) 0%, rgb(20 40 48 / 55%) 100%);
	--msa-gradient-accent: linear-gradient(135deg, var(--msa-color-teal) 0%, var(--msa-color-deep-blue) 100%);
	--msa-gradient-section: linear-gradient(180deg, var(--msa-color-paper) 0%, var(--msa-color-linen) 100%);

	--msa-image-filter: saturate(1.02) contrast(1.04) brightness(0.98);
	--msa-hero-autoplay: 7000ms;
}