/* ==========================================================================
   NEXIA — DESIGN TOKENS
   Singura sursă de adevăr pentru culori, tipografie, raze, spațiere, umbre
   și mișcare. Restul CSS-ului folosește DOAR aceste variabile.

   Culorile sunt EXACT cele din ghidul de brand Nexia. Nu adăuga culori noi
   aici: variațiile se fac numai cu tinturile oficiale (80/60/40/20%).
   ========================================================================== */

:root {
	/* ---------- Primare ---------- */
	--nexia-dark-teal: #00323C;        /* RGB 0,50,60 — dominantă, text, fundal închis */
	--nexia-dark-teal-80: #335B63;
	--nexia-dark-teal-60: #66848A;
	--nexia-dark-teal-40: #99ADB1;
	--nexia-dark-teal-20: #CCD6D8;
	--nexia-dark-teal-rgb: 0, 50, 60;  /* doar pentru umbre / overlay-uri rgba() */

	--nexia-light-teal: #00B9B9;       /* RGB 0,185,185 — accent, CTA, highlight */
	--nexia-light-teal-80: #33C7C7;
	--nexia-light-teal-60: #66D5D5;
	--nexia-light-teal-40: #ADE9E9;
	--nexia-light-teal-20: #CCF1F1;

	/* ---------- Secundare (UNA per pagină — vezi --nexia-secondary) ---------- */
	--nexia-blue: #479DCF;
	--nexia-blue-80: #6CB1D9;
	--nexia-blue-60: #91C4E2;
	--nexia-blue-40: #B5D8EC;
	--nexia-blue-20: #DAEBF5;

	--nexia-dark-blue: #5775B3;
	--nexia-dark-blue-80: #7991C2;
	--nexia-dark-blue-60: #9AACD1;
	--nexia-dark-blue-40: #BCC8E1;
	--nexia-dark-blue-20: #DDE3F0;

	--nexia-purple: #9C4181;
	--nexia-purple-80: #B0679A;
	--nexia-purple-60: #C48DB3;
	--nexia-purple-40: #D7B3CD;
	--nexia-purple-20: #EBD9E6;

	--nexia-pink: #D44984;
	--nexia-pink-80: #DD6D9D;
	--nexia-pink-60: #E592B5;
	--nexia-pink-40: #EEB6CE;
	--nexia-pink-20: #F6DBE6;

	--nexia-orange: #F0A65C;
	--nexia-orange-80: #F3B87D;
	--nexia-orange-60: #F6CA9D;
	--nexia-orange-40: #F9DBBE;
	--nexia-orange-20: #FCEDDE;

	--nexia-yellow: #FBCF40;
	--nexia-yellow-80: #FCD966;
	--nexia-yellow-60: #FDE28C;
	--nexia-yellow-40: #FDECB3;
	--nexia-yellow-20: #FEF5D9;

	/* ---------- Neutre ---------- */
	--nexia-black: #333333;
	--nexia-grey-80: #666666;
	--nexia-grey-60: #999999;
	--nexia-grey-40: #CCCCCC;
	--nexia-grey-20: #E5E5E5;  /* ghidul listează #E5E5E5 pentru 20/10% */
	--nexia-white: #FFFFFF;

	/* ---------- Culoarea secundară a paginii (implicit: Blue) ----------
	   Se schimbă prin clasa body.nexia-secondary--{nume}, setată din
	   Customizer (implicit site) sau per pagină (meta box). */
	--nexia-secondary: var(--nexia-blue);
	--nexia-secondary-20: var(--nexia-blue-20);
	--nexia-secondary-40: var(--nexia-blue-40);

	/* ---------- Roluri semantice ---------- */
	--nexia-text: var(--nexia-dark-teal);          /* AAA pe alb (13.8:1) */
	--nexia-text-muted: var(--nexia-dark-teal-80); /* AAA pe alb (7.45:1) */
	--nexia-bg: var(--nexia-white);
	--nexia-bg-soft: var(--nexia-light-teal-20);   /* fundal de secțiune, text Dark Teal 11.4:1 */
	--nexia-line: var(--nexia-dark-teal-20);
	--nexia-surface: var(--nexia-white);          /* carduri, câmpuri */
	--nexia-surface-raised: var(--nexia-white);   /* meniuri derulante */
	--nexia-accent-soft: var(--nexia-light-teal-20);
	--nexia-panel: var(--nexia-dark-teal);        /* holding device închis */

	/* ---------- Tipografie ---------- */
	/* Effra se activează automat dacă fișierele licențiate sunt în assets/fonts/effra/ */
	--nexia-font: "Effra", "Poppins", Tahoma, "Segoe UI", sans-serif;
	--nexia-light: 300;
	--nexia-regular: 400;
	--nexia-bold: 700;   /* DOAR aceste trei greutăți */

	--nexia-fs-h1: clamp(40px, 2.4rem + 3.2vw, 72px);   /* ghid: 50–78px desktop */
	--nexia-fs-h2: clamp(32px, 1.9rem + 1.6vw, 48px);   /* ghid: 42–50px */
	--nexia-fs-h3: clamp(24px, 1.4rem + 0.7vw, 30px);
	--nexia-fs-h4: 22px;
	--nexia-fs-h5: 19px;
	--nexia-fs-h6: 16px;
	--nexia-fs-subtitle: clamp(18px, 1rem + 0.3vw, 20px); /* ghid: 18–20px */
	--nexia-fs-intro: clamp(20px, 1.1rem + 0.8vw, 28px);  /* ghid: intro 28px */
	--nexia-fs-body: 17px;
	--nexia-fs-small: 14px;
	--nexia-fs-label: 13px;

	--nexia-lh-tight: 1.1;
	--nexia-lh-heading: 1.2;
	--nexia-lh-body: 1.7;

	/* ---------- Holding device (dreptunghiul rotunjit Nexia) ----------
	   O SINGURĂ orientare pe tot site-ul: colțurile stânga-sus + dreapta-jos
	   (forma „frunză”, ca pe nexia.com). Padding interior = raza. Spațiul
	   dintre două device-uri alăturate = jumătate din rază. */
	--nexia-radius-btn: 15px;
	--nexia-radius: 40px;
	--nexia-device: var(--nexia-radius) 0 var(--nexia-radius) 0;
	--nexia-device-pad: var(--nexia-radius);
	--nexia-device-gap: calc(var(--nexia-radius) / 2);

	/* ---------- Layout / spațiere ---------- */
	--nexia-container: 1240px;
	--nexia-content: 760px;   /* lățime de citire */
	--nexia-gutter: clamp(16px, 4vw, 40px);
	--nexia-section: clamp(64px, 8vw, 128px);
	--nexia-space-1: 8px;
	--nexia-space-2: 16px;
	--nexia-space-3: 24px;
	--nexia-space-4: 32px;
	--nexia-space-5: 48px;
	--nexia-space-6: 64px;

	/* ---------- Umbre (nuanțate Dark Teal, cu profunzime) ---------- */
	--nexia-shadow-xs: 0 1px 2px rgba(var(--nexia-dark-teal-rgb), 0.08);
	--nexia-shadow-sm: 0 1px 2px rgba(var(--nexia-dark-teal-rgb), 0.06), 0 6px 16px -4px rgba(var(--nexia-dark-teal-rgb), 0.10);
	--nexia-shadow-md: 0 2px 4px rgba(var(--nexia-dark-teal-rgb), 0.06), 0 16px 32px -10px rgba(var(--nexia-dark-teal-rgb), 0.20);
	--nexia-shadow-lg: 0 4px 8px rgba(var(--nexia-dark-teal-rgb), 0.06), 0 28px 56px -16px rgba(var(--nexia-dark-teal-rgb), 0.30);

	/* ---------- Mișcare ---------- */
	--nexia-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
	--nexia-fast: 200ms;
	--nexia-base: 260ms;
	--nexia-slow: 350ms;
	--nexia-lift: -3px;
	--nexia-lift-card: -6px;

	--nexia-header-h: 88px;
	--nexia-focus: 0 0 0 3px var(--nexia-white), 0 0 0 6px var(--nexia-light-teal);
}

/* Culoarea secundară a paginii — o singură clasă activă pe <body> */
.nexia-secondary--blue      { --nexia-secondary: var(--nexia-blue);      --nexia-secondary-20: var(--nexia-blue-20);      --nexia-secondary-40: var(--nexia-blue-40); }
.nexia-secondary--dark-blue { --nexia-secondary: var(--nexia-dark-blue); --nexia-secondary-20: var(--nexia-dark-blue-20); --nexia-secondary-40: var(--nexia-dark-blue-40); }
.nexia-secondary--purple    { --nexia-secondary: var(--nexia-purple);    --nexia-secondary-20: var(--nexia-purple-20);    --nexia-secondary-40: var(--nexia-purple-40); }
.nexia-secondary--pink      { --nexia-secondary: var(--nexia-pink);      --nexia-secondary-20: var(--nexia-pink-20);      --nexia-secondary-40: var(--nexia-pink-40); }
.nexia-secondary--orange    { --nexia-secondary: var(--nexia-orange);    --nexia-secondary-20: var(--nexia-orange-20);    --nexia-secondary-40: var(--nexia-orange-40); }
.nexia-secondary--yellow    { --nexia-secondary: var(--nexia-yellow);    --nexia-secondary-20: var(--nexia-yellow-20);    --nexia-secondary-40: var(--nexia-yellow-40); }

/* ==========================================================================
   DARK MODE
   Fundalul devine Nexia Dark Teal; suprafețele sunt Dark Teal amestecat cu
   alb (aceeași formulă ca tinturile oficiale, în proporții mici), textul e
   alb (13.8:1), accentul rămâne Light Teal (5.68:1 pe Dark Teal).
   Se activează cu data-theme="dark" pe <html> (buton în header; implicit
   urmează setarea sistemului).
   ========================================================================== */
:root[data-theme="dark"] {
	color-scheme: dark;
	--nexia-bg: var(--nexia-dark-teal);
	--nexia-bg-soft: color-mix(in srgb, var(--nexia-dark-teal) 95%, #FFFFFF);
	--nexia-surface: color-mix(in srgb, var(--nexia-dark-teal) 91%, #FFFFFF);
	--nexia-surface-raised: color-mix(in srgb, var(--nexia-dark-teal) 88%, #FFFFFF);
	--nexia-panel: color-mix(in srgb, var(--nexia-dark-teal) 86%, #FFFFFF);
	--nexia-text: var(--nexia-white);
	--nexia-text-muted: rgba(255, 255, 255, 0.78);
	--nexia-line: rgba(255, 255, 255, 0.14);
	--nexia-accent-soft: rgba(0, 185, 185, 0.16);
	--nexia-secondary-20: color-mix(in srgb, var(--nexia-secondary) 18%, var(--nexia-dark-teal));

	--nexia-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
	--nexia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 20px -6px rgba(0, 0, 0, 0.35);
	--nexia-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 18px 36px -12px rgba(0, 0, 0, 0.5);
	--nexia-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.25), 0 30px 60px -18px rgba(0, 0, 0, 0.6);
	--nexia-focus: 0 0 0 3px var(--nexia-dark-teal), 0 0 0 6px var(--nexia-light-teal);
}

@media (max-width: 781px) {
	:root {
		--nexia-header-h: 72px;
		--nexia-fs-body: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--nexia-lift: 0px;
		--nexia-lift-card: 0px;
	}
}