/* Swimo — Design tokens and webfonts (shared: frontend base + wp-admin)
   ================================================================ */

/* ---- @font-face ---- */

@font-face {
	font-family: "LT Wave";
	src: url("../../fonts/LTWave-3/LTWave-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Haskoy";
	src: url("../../fonts/Haskoy/Haskoy-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Haskoy";
	src: url("../../fonts/Haskoy/Haskoy-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---- Design tokens ---- */

:root {
	--color-cornell-red: #B3181B;
	--color-racing-green: #003D23;
	--color-licorice: #140000;
	--color-antique-white: #FEF7F0;
	--color-white: #FFFCFC;
	--color-slate-blue: #7789E3;
	--color-medium-slate-blue: #7765E3;
	--color-slate-blue-bg: #E4E0F9;
	--color-warm-bg: #FCEBDA;
	--color-success: #00B884;
	--color-tangerine: #ED851D;
	--color-tangerine-soft-bg: rgba(237, 133, 29, 0.2);
	--color-whatsapp: #25D366;
	--color-mint-light: #CCF1E6;
	--color-licorice-20: rgba(20, 0, 0, 0.2);
	--color-wp-input-border: #8c8f94;

	--nav-height: 4rem;
	--site-header-bar-height: 5.5rem;

	--font-size-2xs: 0.75rem;    /* 12px */
	--font-size-xs: 0.875rem;    /* 14px */
	--font-size-sm: 1rem;        /* 16px */
	--font-size-base: 1.125rem;  /* 18px */
	--font-size-md: 1.25rem;     /* 20px */
	--font-size-lg: 1.5rem;      /* 24px */
	--font-size-xl: 1.75rem;     /* 28px */
	--font-size-2xl: 2rem;       /* 32px */
	--font-size-3xl: 2.5rem;     /* 40px */
	--font-size-4xl: 3.5rem;     /* 56px */
	--font-size-5xl: 4.5rem;     /* 72px */
}

@media (min-width: 64rem) {
	:root {
		--nav-height: 7rem;

		/* Matches .site-header__inner right edge (max-width + centered gutter). */
		--site-layout-max: 108rem;
		--site-header-gutter-x: 2.5rem;
		--site-layout-inline-end: max(
			var(--site-header-gutter-x),
			calc(
				(100vw - var(--site-layout-max) - (2 * var(--site-header-gutter-x))) / 2 +
				var(--site-header-gutter-x)
			)
		);
	}
}