/* ============================================================
   TOKENURI DE DESIGN — „Glass Clinic"
   cursurimedicale.ro
   ------------------------------------------------------------
   ACESTA ESTE SINGURUL LOC unde se definesc valorile.

   Aceleași nume trebuie create și în Elementor:
   Top Bar → Variables. Elementor generează propriile variabile
   cu prefixul --e-gv-..., dar dacă le denumești identic, cele
   două sisteme rămân lizibile împreună.

   Motivul pentru care ținem tokenurile și aici, nu doar în
   Elementor: widget-urile HTML, output-ul nativ WooCommerce și
   e-mailurile nu primesc întotdeauna clasele globale V4.
   ============================================================ */

:root {
	/* ---------- Culori: text și fundal ---------- */
	--ink: #001630;          /* titluri, navy profund */
	--ink-2: #0B2B4A;        /* subtitluri, hook serif */
	--body: #47596B;         /* text curent */
	--muted: #7A8A99;        /* text secundar, etichete */
	--page: #FCFCFD;         /* fundal general */
	--band: #F7F8FA;         /* fundal secțiune alternativă */
	--line: #E7EDF3;         /* borduri, separatoare */
	--line-2: #D8E4EE;       /* borduri accentuate */

	/* ---------- Culori: acțiune (portocaliu) ---------- */
	--orange: #F18F12;       /* butoane principale */
	--orange-hi: #FD8900;    /* accent în titlu („360°") */
	--orange-d: #B4700A;     /* text pe fundal deschis — contrast AA */
	--orange-tint: #FEF4E6;  /* fundal badge */

	/* ---------- Culori: sprijin (albastru / cyan) ---------- */
	--blue: #2B7FE8;
	--blue-d: #1C63BD;       /* text și linkuri — contrast AA */
	--blue-tint: #EDF4FE;
	--cyan: #22C3D6;

	/* ---------- Culori: confirmare (teal) ---------- */
	--teal: #17B3AE;
	--teal-d: #0E8C88;       /* text pe fundal deschis — contrast AA */
	--teal-tint: #E8F7F7;

	/* ---------- Raze ---------- */
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-pill: 999px;

	/* ---------- Umbre ---------- */
	--sh-xs: 0 2px 10px rgba(0, 22, 48, .04);
	--sh-sm: 0 6px 22px rgba(0, 22, 48, .06);
	--sh-md: 0 14px 44px rgba(0, 22, 48, .09);
	--sh-lg: 0 28px 70px rgba(0, 22, 48, .13);
	--sh-btn: 0 8px 22px rgba(241, 143, 18, .28);
	--sh-btn-h: 0 13px 28px rgba(241, 143, 18, .36);

	/* ---------- Tipografie ---------- */
	--serif: 'Lora', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-h1: clamp(31px, 4.2vw, 49px);
	--fs-h2: clamp(27px, 3.2vw, 35px);
	--fs-h3: 18px;
	--fs-body: 16.5px;
	--fs-small: 14px;
	--fs-eyebrow: 11px;

	/* ---------- Spațiere ---------- */
	--sp-sec: 84px;          /* padding vertical secțiune, desktop */
	--sp-gap: 24px;          /* distanță standard între carduri */
	--wrap: 1180px;          /* lățime container */
	--wrap-pad: 24px;

	/* ---------- Ținte de atingere ---------- */
	--tap: 48px;             /* înălțime minimă buton — important pe mobil */
}

/* ------------------------------------------------------------
   BREAKPOINT-URI
   Aliniate cu cele implicite din Elementor (tablet 1024,
   mobile 767), ca CSS-ul și editorul să vadă aceleași praguri.
   EduBlink cere activarea „Tablet Extra" (1200) — o activezi,
   dar nu o folosim în tokenuri.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
	:root {
		--sp-sec: 68px;
	}
}

@media (max-width: 767px) {
	:root {
		--sp-sec: 58px;
		--fs-body: 16px;
	}
}