/* ==========================================================================
   Relive Health — design tokens
   Brand source: Relive_Brand Strategy v1.2
   True Black #1F2124 · Blank Slate #3F5C74 · Vigor Blue #39BCDD · Soft Gray #D9DBDE
   ========================================================================== */

:root {
	/* --- Brand core (exact, from brand book) --- */
	--rl-black: #1f2124;
	--rl-slate: #3f5c74;
	--rl-blue: #39bcdd;
	--rl-gray: #d9dbde;

	/* --- Derived ramp -----------------------------------------------------
	   Vigor Blue on white is ~1.9:1, so it can never carry white label text.
	   Primary CTAs therefore run Vigor Blue with near-black type (9.5:1),
	   and --rl-blue-ink handles blue text/links on light backgrounds (5.1:1).
	   ---------------------------------------------------------------------- */
	--rl-blue-050: #edfaff;
	--rl-blue-100: #d4f3fb;
	--rl-blue-200: #a9e6f5;
	--rl-blue-400: #55c8e4;
	--rl-blue-500: var(--rl-blue);
	--rl-blue-600: #22a5c6;
	--rl-blue-ink: #0b7a96;
	--rl-blue-900: #0a4b5c;

	--rl-slate-050: #f4f7f9;
	--rl-slate-100: #e6ecf1;
	--rl-slate-200: #c9d5de;
	--rl-slate-400: #6f889c;
	--rl-slate-500: var(--rl-slate);
	--rl-slate-700: #33495c;
	--rl-slate-900: #223342;

	--rl-ink: var(--rl-black);
	--rl-ink-2: #4a5158;
	--rl-ink-3: #6b7379;
	--rl-line: #e3e6e9;
	--rl-surface: #ffffff;
	--rl-surface-2: #f7f9fa;
	--rl-surface-3: #eef2f5;

	--rl-success: #17795a;
	--rl-success-bg: #e7f6f0;
	--rl-warn: #8a5a09;
	--rl-warn-bg: #fdf3e2;
	--rl-danger: #b3261e;
	--rl-danger-bg: #fdeceb;

	/* --- Type -------------------------------------------------------------
	   Termina is licensed; drop woff2 files in assets/fonts/termina/ and the
	   theme picks them up automatically (see inc/enqueue.php). Until then the
	   display stack falls through to Poppins, which is metrically close
	   enough at heading sizes with the tracking below.
	   ---------------------------------------------------------------------- */
	--rl-font-display: "Termina", "Poppins", "Helvetica Neue", Arial, sans-serif;
	--rl-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--rl-step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
	--rl-step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
	--rl-step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
	--rl-step-1: clamp(1.10rem, 1.04rem + 0.30vw, 1.28rem);
	--rl-step-2: clamp(1.32rem, 1.20rem + 0.55vw, 1.66rem);
	--rl-step-3: clamp(1.62rem, 1.38rem + 1.05vw, 2.24rem);
	--rl-step-4: clamp(1.95rem, 1.50rem + 1.95vw, 3.10rem);
	--rl-step-5: clamp(2.35rem, 1.60rem + 3.20vw, 4.20rem);

	--rl-lh-tight: 1.08;
	--rl-lh-snug: 1.22;
	--rl-lh-body: 1.65;

	/* --- Space (4px base) --- */
	--rl-1: 0.25rem;
	--rl-2: 0.5rem;
	--rl-3: 0.75rem;
	--rl-4: 1rem;
	--rl-5: 1.5rem;
	--rl-6: 2rem;
	--rl-7: 2.75rem;
	--rl-8: 3.5rem;
	--rl-9: 4.5rem;
	--rl-10: 6rem;
	--rl-section: clamp(3rem, 2rem + 5vw, 6.5rem);

	/* --- Shape — the brand mark is fluid and rounded; carry that through --- */
	--rl-r-sm: 8px;
	--rl-r-md: 14px;
	--rl-r-lg: 22px;
	--rl-r-xl: 32px;
	--rl-r-pill: 999px;

	--rl-shadow-sm: 0 1px 2px rgba(31, 33, 36, 0.06), 0 1px 3px rgba(31, 33, 36, 0.04);
	--rl-shadow-md: 0 4px 12px rgba(31, 33, 36, 0.07), 0 2px 4px rgba(31, 33, 36, 0.04);
	--rl-shadow-lg: 0 18px 44px rgba(34, 51, 66, 0.13), 0 4px 12px rgba(34, 51, 66, 0.06);
	--rl-shadow-focus: 0 0 0 3px var(--rl-blue-200), 0 0 0 5px var(--rl-blue-ink);

	/* --- Layout --- */
	--rl-wrap: 1240px;
	--rl-wrap-wide: 1440px;
	--rl-wrap-narrow: 760px;
	--rl-gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
	--rl-header-h: 72px;

	--rl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--rl-dur: 220ms;
}

/* Inline icons used as CSS masks (so they inherit currentColor). */
:root {
	--rl-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
	:root {
		--rl-header-h: 84px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--rl-dur: 0.01ms;
	}
}