/* ═══════════════════════════════════════════════════════════════════
   ITRC — DESIGN TOKENS v2.0
   ═══════════════════════════════════════════════════════════════════

   Single source of truth pentru toate valorile de design.

   ARHITECTURĂ PE 3 NIVELURI:

     1. PRIMITIVE — valori brute (--raw-*). NU se folosesc direct în
        componente. Sunt baza pentru semantic. Le schimbi DOAR aici
        când faci reskin total (un site identic cu altă paletă).

     2. SEMANTIC — intenția (--color-primary, --text-base, --space-5).
        Componentele consumă EXCLUSIV semanticul. Numele păstrate
        identice cu legacy pentru backward compatibility totală.

     3. COMPONENT — overrides per componentă (--tpl-hero-bg, --footer-bg).
        Pentru reskin local fără să atingi semanticul.

   PENTRU REUTILIZARE LA SITE-URI NOI:
     - Schimbi DOAR layer 1 (--raw-*) → tot DS-ul se reskinează
     - Layer 2 + 3 rămân identice
     - CSS-ul de componente nu se atinge

   Versiune: 2.0 (mai 2026)
   ═══════════════════════════════════════════════════════════════════ */


:root {

	/* ═══════════════════════════════════════════════════════════════
	   LAYER 1 — PRIMITIVE (raw values)
	   Nu folosi direct în componente.
	   ═══════════════════════════════════════════════════════════════ */

	/* ─── Culori primitive — paletă brand ─── */

	--raw-blue-900: #0a2440;
	--raw-blue-700: #163d63;
	--raw-blue-500: #1f5489;
	--raw-blue-50:  #f8fbff;

	--raw-gold-600: #c9a500;
	--raw-gold-500: #e5bd07;

	--raw-gray-0:   #ffffff;
	--raw-gray-50:  #faf9f6;
	--raw-gray-100: #f4f2ec;
	--raw-gray-200: #eceae6;
	--raw-gray-300: #e8e2d8;
	--raw-gray-600: #6b6b68;
	--raw-gray-700: #4a4a47;
	--raw-gray-900: #3d3d3a;

	--raw-green-600:  #2f7d32;
	--raw-yellow-700: #d9a300;
	--raw-red-600:    #c0392b;

	/* Footer brand (distinct de --raw-blue-900) */
	--raw-footer-bg: #003351;


	/* ─── Tipografie primitive ─── */

	--raw-font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
	--raw-font-ui:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--raw-font-reading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--raw-font-mono:    ui-monospace, "SF Mono", Monaco, Consolas, monospace;


	/* ═══════════════════════════════════════════════════════════════
	   LAYER 2 — SEMANTIC (folosit de componente)
	   ═══════════════════════════════════════════════════════════════ */

	/* ─── Brand ─── */

	--color-brand-navy:         var(--raw-blue-900);
	--color-brand-primary:      var(--raw-blue-500);
	--color-brand-primary-dark: var(--raw-blue-700);

	/* ─── Accent ─── */

	--color-accent:       var(--raw-gold-500);
	--color-accent-hover: var(--raw-gold-600);
	/* Legacy compatibility alias pentru CSS existent. */
	--accent-gold:        var(--color-accent);

	/* ─── Neutrals ─── */

	--color-neutral-0:   var(--raw-gray-0);
	--color-neutral-50:  var(--raw-gray-50);
	--color-neutral-100: var(--raw-gray-100);
	--color-neutral-200: var(--raw-gray-200);
	--color-neutral-300: var(--raw-gray-300);
	--color-neutral-600: var(--raw-gray-600);
	--color-neutral-700: var(--raw-gray-700);
	--color-neutral-900: var(--raw-gray-900);

	/* ─── States ─── */

	--color-success: var(--raw-green-600);
	--color-warning: var(--raw-yellow-700);
	--color-danger:  var(--raw-red-600);

	/* ─── Surface (fundaluri) ─── */

	--color-surface:      var(--raw-gray-0);
	--color-surface-soft: var(--raw-gray-50);
	--color-surface-base: var(--raw-gray-100);
	--color-surface-elev: var(--raw-gray-200);
	--color-surface-wash: var(--raw-blue-50);

	/* ─── Text ─── */

	--color-text:        var(--raw-gray-900);
	--color-text-muted:  var(--raw-gray-600);
	--color-text-strong: var(--raw-blue-900);

	/* Legacy compatibility aliases. */
	--color-navy:   var(--color-brand-navy);
	--surface:      var(--color-surface);
	--surface-soft: var(--color-surface-soft);
	--text-muted:   var(--color-text-muted);
	--color-muted:  var(--color-text-muted);

	/* ─── On-dark ─── */

	--color-on-dark:       var(--raw-gray-0);
	--color-on-dark-muted: rgba(255, 255, 255, 0.78);
	--color-on-dark-soft:  rgba(255, 255, 255, 0.88);

	/* ─── Border ─── */

	--color-border:         var(--raw-gray-200);
	--color-border-subtle:  rgba(10, 36, 64, 0.05);
	--color-border-strong:  rgba(10, 36, 64, 0.18);
	--color-border-on-dark: rgba(255, 255, 255, 0.18);

	/* ─── Overlay (hero cu featured image) ─── */

	--overlay-dark-strong: rgba(10, 36, 64, 0.85);
	--overlay-dark-medium: rgba(10, 36, 64, 0.56);
	--overlay-dark-soft:   rgba(10, 36, 64, 0.40);


	/* ─── Tipografie semantică ─── */

	--font-serif:   var(--raw-font-serif);    /* Titluri */
	--font-ui:      var(--raw-font-ui);       /* Meniuri, butoane, tags */
	--font-reading: var(--raw-font-reading);  /* Body text */
	--font-mono:    var(--raw-font-mono);
	--font-sans:    var(--font-reading);      /* alias compat */

	/* Scale 1.25 (Major Third) */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.25rem;
	--text-xl:   1.563rem;
	--text-2xl:  1.953rem;
	--text-3xl:  2.441rem;
	--text-4xl:  3.052rem;

	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	--leading-tight:  1.2;
	--leading-snug:   1.4;
	--leading-normal: 1.6;

	--tracking-tight:  -0.02em;
	--tracking-normal: 0;
	--tracking-wide:   0.08em;


	/* ─── Spacing (4px base, păstrat IDENTIC cu legacy) ─── */

	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  2.5rem;
	--space-8:  3rem;
	--space-10: 4rem;
	--space-12: 6rem;


	/* ─── Radius ─── */

	--radius-none:   0;
	--radius-2xs:    0.25rem;
	--radius-xs:     0.5rem;
	--radius-sm:     0.75rem;
	--radius-md:     1rem;
	--radius-lg:     1.5rem;
	--radius-pill:   999px;
	--radius-circle: 50%;


	/* ─── Shadow (tinted navy) ─── */

	--shadow-xs: 0 1px 2px rgba(10, 36, 64, 0.04);
	--shadow-sm: 0 2px 6px rgba(10, 36, 64, 0.06);
	--shadow-md: 0 4px 12px rgba(10, 36, 64, 0.08);
	--shadow-lg: 0 8px 24px rgba(10, 36, 64, 0.12);
	--shadow-xl: 0 18px 48px rgba(10, 36, 64, 0.06);


	/* ─── Motion ─── */

	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--duration-fast: 150ms;
	--duration-med:  250ms;
	--duration-slow: 400ms;


	/* ─── Z-index scale ─── */

	--z-dropdown: 100;
	--z-sticky:   200;
	--z-overlay:  300;
	--z-modal:    400;
	--z-tooltip:  500;


	/* ─── Eyebrow utility tokens ─── */

	--eyebrow-size:      var(--text-xs);
	--eyebrow-weight:    var(--font-weight-semibold);
	--eyebrow-tracking:  var(--tracking-wide);
	--eyebrow-transform: uppercase;


	/* ═══════════════════════════════════════════════════════════════
	   TIPOGRAFIE SISTEMATICĂ — type scale cu rol clar
	   Hierarchy: Display > H1 > H2 > H3 > H4 > Eyebrow
	                Lead > Body > Small > Caption
	   ═══════════════════════════════════════════════════════════════ */

	/* DISPLAY — hero homepage, tpl-hero titles */
	--type-display-family:   var(--font-serif);
	--type-display-size:     clamp(2.25rem, 3.5vw, 3rem);     /* 36 → 48px */
	--type-display-weight:   var(--font-weight-bold);
	--type-display-leading:  1.08;
	--type-display-tracking: -0.02em;

	/* TITLE — folosit specific de .tpl-hero__title */
	--type-title-family:    var(--font-serif);
	--type-title-size:      clamp(2rem, 4vw, 3rem);           /* 32 → 48px */
	--type-title-weight:    var(--font-weight-bold);
	--type-title-leading:   1.12;
	--type-title-tracking:  -0.02em;

	/* SUBTITLE — folosit specific de .tpl-hero__subtitle */
	--type-subtitle-family:    var(--font-reading);
	--type-subtitle-size:      clamp(1.1rem, 1.5vw, 1.3rem);  /* 17.6 → 20.8px */
	--type-subtitle-weight:    var(--font-weight-regular);
	--type-subtitle-leading:   1.7;
	--type-subtitle-tracking:  0;

	/* H1 — page title intern */
	--type-h1-family:   var(--font-serif);
	--type-h1-size:     clamp(2rem, 2.8vw, 2.5rem);           /* 32 → 40px */
	--type-h1-weight:   var(--font-weight-bold);
	--type-h1-leading:  1.12;
	--type-h1-tracking: -0.02em;

	/* H2 — secțiuni mari (widget titles, "Formarea viitorilor preoți") */
	--type-h2-family:   var(--font-serif);
	--type-h2-size:     clamp(1.5rem, 2.2vw, 2rem);           /* 24 → 32px */
	--type-h2-weight:   var(--font-weight-bold);
	--type-h2-leading:  1.2;
	--type-h2-tracking: -0.015em;

	/* H3 — sub-secțiuni, card titles */
	--type-h3-family:   var(--font-serif);
	--type-h3-size:     clamp(1.25rem, 1.6vw, 1.5rem);        /* 20 → 24px */
	--type-h3-weight:   var(--font-weight-semibold);
	--type-h3-leading:  1.3;
	--type-h3-tracking: -0.01em;

	/* H4 — labels/sub-headings (footer headings "CONTACT") */
	--type-h4-family:   var(--font-ui);
	--type-h4-size:     1rem;                                 /* 16px */
	--type-h4-weight:   var(--font-weight-bold);
	--type-h4-leading:  1.3;
	--type-h4-tracking: 0.04em;

	/* EYEBROW — kicker mic deasupra titlurilor */
	--type-eyebrow-family:    var(--font-ui);
	--type-eyebrow-size:      var(--text-xs);                 /* 12px */
	--type-eyebrow-weight:    var(--font-weight-semibold);
	--type-eyebrow-leading:   1.4;
	--type-eyebrow-tracking:  0.08em;
	--type-eyebrow-transform: uppercase;

	/* LEAD — paragraf intro mai mare */
	--type-lead-family:   var(--font-reading);
	--type-lead-size:     clamp(1.05rem, 1.2vw, 1.2rem);      /* 16.8 → 19.2px */
	--type-lead-weight:   var(--font-weight-regular);
	--type-lead-leading:  1.68;
	--type-lead-tracking: 0;

	/* BODY — paragraf default */
	--type-body-family:   var(--font-reading);
	--type-body-size:     1rem;                               /* 16px */
	--type-body-weight:   var(--font-weight-regular);
	--type-body-leading:  1.65;
	--type-body-tracking: 0;

	/* SMALL — meta, dată, autor */
	--type-small-family:   var(--font-reading);
	--type-small-size:     0.875rem;                          /* 14px */
	--type-small-weight:   var(--font-weight-regular);
	--type-small-leading:  1.5;
	--type-small-tracking: 0;

	/* CAPTION — sub-text, fineprint */
	--type-caption-family:   var(--font-reading);
	--type-caption-size:     0.75rem;                         /* 12px */
	--type-caption-weight:   var(--font-weight-regular);
	--type-caption-leading:  1.4;
	--type-caption-tracking: 0;

	/* BUTTON small/medium/large */
	--type-btn-s-family:   var(--font-ui);
	--type-btn-s-size:     0.8125rem;                         /* 13px — filtre, tag-uri */
	--type-btn-s-weight:   var(--font-weight-medium);
	--type-btn-s-tracking: 0.02em;

	--type-btn-m-family:   var(--font-ui);
	--type-btn-m-size:     0.9375rem;                         /* 15px — CTA standard */
	--type-btn-m-weight:   var(--font-weight-semibold);
	--type-btn-m-tracking: 0.02em;

	--type-btn-l-family:   var(--font-ui);
	--type-btn-l-size:     1rem;                              /* 16px — hero CTA */
	--type-btn-l-weight:   var(--font-weight-bold);
	--type-btn-l-tracking: 0.02em;


	/* ═══════════════════════════════════════════════════════════════
	   SPACING RHYTHM — semantic tokens pentru spațiere consistentă
	   În loc să folosești --space-N peste tot, folosește aceste alias-uri
	   semantice. Asta îți dă ritm uniform și schimbare easy.
	   ═══════════════════════════════════════════════════════════════ */

	/* Vertical rhythm — secțiuni
	 * Sistemul este pe scară semantică, nu pe valori hardcodate.
	 * Folosește XS/SM/MD/LG/XL în funcție de greutatea secțiunii.
	 */
	--section-space-xs: clamp(1.5rem, 2.5vw, 2rem);     /* 24 → 32px: strip/badge */
	--section-space-sm: clamp(2rem, 3.5vw, 3rem);       /* 32 → 48px: secțiuni apropiate */
	--section-space-md: clamp(2.75rem, 5vw, 4.5rem);    /* 44 → 72px: secțiune standard */
	--section-space-lg: clamp(3.5rem, 6.5vw, 5.5rem);   /* 56 → 88px: secțiune majoră */
	--section-space-xl: clamp(4.5rem, 8vw, 7rem);       /* 72 → 112px: closing/before footer */

	/* Alias-uri vechi păstrate ca să nu rupem CSS existent */
	--gap-section-y:       var(--section-space-md);
	--gap-section-y-tight: var(--section-space-sm);
	--gap-section-y-loose: var(--section-space-lg);

	/* Hero — padding vertical interior (specific .tpl-hero) */
	--gap-hero-y:           clamp(3.5rem, 7vw, 6rem);  /* 56 → 96px normal */
	--gap-hero-y-large:     clamp(5rem, 9vw, 8rem);    /* 80 → 128px large */

	/* Intra-secțiune — content rhythm */
	--gap-eyebrow-to-title:   var(--space-3);    /* 12px */
	--gap-title-to-desc:      var(--space-6);    /* 32px */
	--gap-desc-to-cta:        var(--space-8);    /* 48px */
	--gap-paragraph:          var(--space-4);    /* 16px între paragrafe */

	/* Grid/list rhythm */
	--gap-cards:              clamp(1rem, 1.5vw, 1.5rem);  /* 16 → 24px între carduri */
	--gap-cards-tight:        var(--space-3);              /* 12px */
	--gap-list-items:         var(--space-2);              /* 8px */

	/* Padding intern */
	--pad-card:               clamp(1.25rem, 2vw, 1.5rem); /* 20 → 24px card padding */
	--pad-card-tight:         var(--space-4);              /* 16px */
	--pad-btn-y:              var(--space-3);              /* 12px */
	--pad-btn-x:              var(--space-5);              /* 24px */
	--pad-btn-y-l:            var(--space-4);              /* 16px butoane mari */
	--pad-btn-x-l:            var(--space-7);              /* 40px */



	/* ═══════════════════════════════════════════════════════════════
	   LAYER 3 — COMPONENT TOKENS
	   ═══════════════════════════════════════════════════════════════ */

	/* ─── tpl-hero (header comun template-uri) ─── */

	--tpl-hero-min-h:         clamp(320px, 40vh, 420px);
	--tpl-hero-padding-y:     var(--space-8);
	--tpl-hero-padding-x:     var(--space-5);
	--tpl-hero-bg:            linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-brand-primary-dark) 100%);
	--tpl-hero-color:         var(--color-on-dark);
	--tpl-hero-eyebrow-color: var(--color-accent);

	/* ─── Hierarchy de titluri (cross-component) ─── */
	/* Hero H1: clamp(2.2rem, 4vw, 3rem) = max 48px — definit în .hero-title și .tpl-hero-title */
	/* Widget H2: un step mai jos — max 36px ca să existe diferență vizuală clară */
	--widget-title-size:    clamp(1.6rem, 2.8vw, 2.25rem);  /* 25.6px → 36px */
	--widget-title-weight:  700;
	--widget-title-leading: 1.15;
	--widget-title-tracking: -0.015em;

	/* Variantă minimal — page.php legal/generic */
	--tpl-hero-minimal-min-h:     clamp(160px, 22vh, 220px);
	--tpl-hero-minimal-padding-y: var(--space-6);

	/* Overlay când există featured image */
	--tpl-hero-overlay: linear-gradient(
		to top,
		var(--overlay-dark-strong) 0%,
		var(--overlay-dark-soft) 100%
	);

	--tpl-hero-btn-radius: var(--radius-pill);


	/* ─── Footer ─── */

	--footer-bg:             var(--raw-footer-bg);
	--footer-bg-deep:        rgba(0, 0, 0, 0.20);            /* bottom bar copyright */
	--footer-color:          var(--color-on-dark);
	--footer-link:           #cfd5dd;                        /* mai contrast vs #999 vechi */
	--footer-link-muted:     rgba(207, 213, 221, 0.7);
	--footer-link-hover:     var(--color-accent);
	--footer-heading-color:  var(--color-accent);
	--footer-heading-size:   var(--type-h4-size);
	--footer-heading-weight: 800;
	--footer-heading-tracking: 0.05em;
	--footer-separator:      rgba(229, 189, 7, 0.12);         /* fin auriu */
	--footer-divider:        rgba(229, 189, 7, 0.18);         /* mai vizibil */


	/* ─── Newsletter bar (în footer) ─── */

	--newsletter-bg:        rgba(229, 189, 7, 0.06);          /* wash auriu fin */
	--newsletter-padding-y: clamp(1.5rem, 3vw, 2.5rem);
	--newsletter-padding-x: clamp(1rem, 3vw, 3rem);
	--newsletter-border:    rgba(229, 189, 7, 0.15);


	/* ─── Language switcher ─── */

	--lang-switcher-color:        var(--color-text);
	--lang-switcher-color-dark:   var(--color-on-dark);
	--lang-switcher-bg-hover:     rgba(31, 84, 137, 0.08);
	--lang-switcher-bg-hover-dark: rgba(255, 255, 255, 0.1);
	--lang-switcher-radius:       var(--radius-pill);


	/* ─── Container shells ─── */

	/* ─── Container shells / lățimi standardizate ───
	 * Regula: gutter = spațiu per laterală. Shell-urile folosesc
	 * calc(100% - (2 * var(--shell-gutter))).
	 */
	--shell-gutter:  clamp(1rem, 3vw, 2rem);

	--shell-text:    800px;
	--shell-content: 960px;
	--shell-section: 1160px;
	--shell-wide:    1280px;
	--shell-max:     1440px;

	/* Backward compatibility pentru clasele existente */
	--shell-default: var(--shell-section);
	--shell-narrow:  var(--shell-content);
	--shell-compact: var(--shell-text);

	/* Ritm vertical standard pentru pagini/template-uri
	 * after-hero = distanța de la hero la primul bloc real.
	 * before-footer = distanța de respiro înainte de newsletter/footer.
	 */
	--page-gap-after-hero:   var(--section-space-sm);
	--page-gap-before-footer: var(--section-space-xl);

	--page-shell-padding-y:       var(--section-space-md);
	--page-shell-padding-y-tight: var(--page-gap-after-hero);
	--page-shell-padding-y-loose: var(--section-space-lg);

	--section-gap-xs: var(--section-space-xs);
	--section-gap-sm: var(--section-space-sm);
	--section-gap-md: var(--section-space-md);
	--section-gap-lg: var(--section-space-lg);
	--section-gap-xl: var(--section-space-xl);
}


/* ═══════════════════════════════════════════════════════════════════
   @FONT-FACE — Inter + Roboto + Playfair Display self-hosted
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Roboto (UI) ─── */

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

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Roboto/Roboto-Medium.woff2") format("woff2");
}

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


/* ─── Mobile polish tokens ───
 * Folosite pentru consistență pe template-uri: carduri, secțiuni,
 * butoane hero și acțiuni flotante.
 */
@media (max-width: 767.98px) {
	:root {
		--mobile-card-radius: 22px;
		--mobile-card-padding: clamp(1.35rem, 6vw, 1.75rem);
		--mobile-section-gap: clamp(2rem, 8vw, 3rem);
		--mobile-hero-button-height: 42px;
		--mobile-floating-size: 42px;
	}
}


/* ─── Inter (reading) ─── */

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

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Inter/Inter-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/Inter/Inter-SemiBold.woff2") format("woff2");
}

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


/* ─── Playfair Display (serif/titluri) ─── */

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Bold.woff2") format("woff2");
}