/* ═══════════════════════════════════════════════════════════════════
   ITRC — DESIGN TOKENS v1.0
   ═══════════════════════════════════════════════════════════════════
   
   Single source of truth pentru toate valorile de design.
   
   Load FIRST, înaintea oricărui alt CSS, în enqueue.php:
   wp_enqueue_style('itrc-tokens', ..., [], $ver);
   
   Reguli:
   - NU modifica valori fără a actualiza design system-ul documentat
   - TOATE CSS-urile temei consumă tokens, nu valori hardcoded
   - Pentru excepții punctuale, documentează cu comentariu
   
   Versiune: 1.0 (17 aprilie 2026)
   ═══════════════════════════════════════════════════════════════════ */


:root {

	/* ─────────────────────────────────────────────────────────────
	   CULORI — BRAND
	   ───────────────────────────────────────────────────────────── */
	
	--color-brand-navy:         #0a2440;   /* Bleumarin închis, hero backgrounds */
	--color-brand-primary:      #1f5489;   /* Albastru primary, butoane, CTA */
	--color-brand-primary-dark: #163d63;   /* Hover primary, gradient stop */
	
	
	/* ─────────────────────────────────────────────────────────────
	   CULORI — ACCENT (galben-auriu)
	   ───────────────────────────────────────────────────────────── */
	
	--color-accent:             #e5bd07;   /* Accent primary (Susține, highlight) */
	--color-accent-hover:       #c9a500;   /* Hover state accent */
	
	
	/* ─────────────────────────────────────────────────────────────
	   CULORI — NEUTRALS (scală warm cream)
	   ───────────────────────────────────────────────────────────── */
	
	--color-neutral-0:          #ffffff;   /* Alb pur */
	--color-neutral-50:         #faf9f6;   /* Off-white subtle */
	--color-neutral-100:        #f4f2ec;   /* Cream surface elevated */
	--color-neutral-200:        #eceae6;   /* Borders, dividers */
	--color-neutral-600:        #6b6b68;   /* Text muted, meta, captions */
	--color-neutral-900:        #3d3d3a;   /* Text primary, headings on light bg */
	
	
	/* ─────────────────────────────────────────────────────────────
	   CULORI — SEMANTIC (success / warning / danger)
	   ───────────────────────────────────────────────────────────── */
	
	--color-success:            #2f7d32;   /* Admitere deschisă, success */
	--color-warning:            #d9a300;   /* Atenție (distinct de accent) */
	--color-danger:             #c0392b;   /* Erori, critical */
	
	
	/* ─────────────────────────────────────────────────────────────
	   TIPOGRAFIE — FONT STACKS
	   ───────────────────────────────────────────────────────────── */
	
	--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	              "Helvetica Neue", Arial, sans-serif;
	--font-mono:  ui-monospace, "SF Mono", Monaco, Consolas, monospace;
	
	
	/* ─────────────────────────────────────────────────────────────
	   TIPOGRAFIE — SCALE (ratio 1.25, Major Third)
	   ───────────────────────────────────────────────────────────── */
	
	--text-xs:    0.75rem;    /* 12px — meta, labels mici, breadcrumb */
	--text-sm:    0.875rem;   /* 14px — body small, captions, UI secundar */
	--text-base:  1rem;       /* 16px — body text DEFAULT */
	--text-lg:    1.25rem;    /* 20px — body emphasis, lead paragraph, h4 */
	--text-xl:    1.563rem;   /* 25px — h3, card titles */
	--text-2xl:   1.953rem;   /* 31px — h2, section subtitles */
	--text-3xl:   2.441rem;   /* 39px — h1 pagini interne */
	--text-4xl:   3.052rem;   /* 49px — hero titles (max) */
	
	
	/* ─────────────────────────────────────────────────────────────
	   TIPOGRAFIE — WEIGHTS
	   ───────────────────────────────────────────────────────────── */
	
	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	
	
	/* ─────────────────────────────────────────────────────────────
	   TIPOGRAFIE — LINE HEIGHT (unitless)
	   ───────────────────────────────────────────────────────────── */
	
	--leading-tight:   1.2;    /* Titluri mari (h1, h2, hero) */
	--leading-snug:    1.4;    /* Subtitles, card titles */
	--leading-normal:  1.6;    /* Body text — lizibilitate optimă */
	
	
	/* ─────────────────────────────────────────────────────────────
	   TIPOGRAFIE — LETTER SPACING
	   ───────────────────────────────────────────────────────────── */
	
	--tracking-tight:   -0.02em;   /* Titluri mari */
	--tracking-normal:  0;         /* Default (nu declara pe body) */
	--tracking-wide:    0.08em;    /* UPPERCASE labels, eyebrow */
	
	
	/* ─────────────────────────────────────────────────────────────
	   TIPOGRAFIE — COMPONENT TOKENS (reutilizabile)
	   ───────────────────────────────────────────────────────────── */
	
	/* Eyebrow: textul mic deasupra titlurilor ("140 DE ANI...", "ADMITERE 2026") */
	--eyebrow-size:        var(--text-xs);
	--eyebrow-weight:      var(--font-weight-semibold);
	--eyebrow-tracking:    var(--tracking-wide);
	--eyebrow-transform:   uppercase;
	
	
	/* ─────────────────────────────────────────────────────────────
	   SPACING — scală geometrică (4px base)
	   ───────────────────────────────────────────────────────────── */
	
	--space-1:   0.25rem;   /*  4px */
	--space-2:   0.5rem;    /*  8px */
	--space-3:   0.75rem;   /* 12px */
	--space-4:   1rem;      /* 16px */
	--space-5:   1.5rem;    /* 24px */
	--space-6:   2rem;      /* 32px */
	--space-7:   2.5rem;    /* 40px — intermediate section padding */
	--space-8:   3rem;      /* 48px */
	--space-10:  4rem;      /* 64px */
	--space-12:  6rem;      /* 96px */
	
	
	/* ─────────────────────────────────────────────────────────────
	   RADIUS
	   ───────────────────────────────────────────────────────────── */
	
	--radius-sm:     0.25rem;    /*  4px — small tags, mini-pills */
	--radius-md:     0.5rem;     /*  8px — cards, inputs */
	--radius-lg:     0.75rem;    /* 12px — cards elevate */
	--radius-xl:     1rem;       /* 16px — hero elements */
	--radius-full:   9999px;     /* pills, avatars */
	
	
	/* ─────────────────────────────────────────────────────────────
	   SHADOW — tinted navy pentru integrare cu brand
	   ───────────────────────────────────────────────────────────── */
	
	--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);
	
	
	/* ─────────────────────────────────────────────────────────────
	   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;
	
	
	/* ─────────────────────────────────────────────────────────────
	   HERO SYSTEM — 3 ROLURI UNIFICATE
	   (valori derivate pentru a fi consumate de hero-*.css)
	   ───────────────────────────────────────────────────────────── */
	
	/* Primary hero — home, page-admitere-hub, page-sustine-seminarul */
	--hero-primary-min-h:    clamp(480px, 60vh, 600px);
	--hero-primary-padding:  clamp(var(--space-8), 8vw, var(--space-12)) 0;
	--hero-primary-bg:       var(--color-brand-navy);
	
	/* Standard hero — page-prezentare, page-seminarul, page-institutul, 
	                   page-chemarea, page-contact, category, single */
	--hero-standard-min-h:   clamp(320px, 40vh, 420px);
	--hero-standard-padding: var(--space-8) 0;
	--hero-standard-bg:      linear-gradient(
	                           135deg,
	                           var(--color-brand-navy) 0%,
	                           var(--color-brand-primary-dark) 100%
	                         );
	
	/* Compact hero — search, 404 */
	--hero-compact-min-h:    clamp(240px, 30vh, 320px);
	--hero-compact-padding:  var(--space-6) 0;
	--hero-compact-bg:       linear-gradient(
	                           135deg,
	                           var(--color-brand-navy) 0%,
	                           var(--color-brand-primary) 100%
	                         );
}


/* ═══════════════════════════════════════════════════════════════════
   @FONT-FACE DECLARATIONS — Inter + Playfair Display self-hosted
   
   Files trebuie puse în /assets/fonts/:
   
   Inter/
   ├── Inter-Regular.woff2    (weight 400)
   ├── Inter-Medium.woff2     (weight 500)
   ├── Inter-SemiBold.woff2   (weight 600)
   └── Inter-Bold.woff2       (weight 700)
   
   PlayfairDisplay/
   ├── PlayfairDisplay-Regular.woff2       (weight 400)
   ├── PlayfairDisplay-Italic.woff2        (weight 400 italic)
   └── PlayfairDisplay-Bold.woff2          (weight 700)
   
   Download de pe rsms.me/inter și fonts.google.com/specimen/Playfair+Display
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Inter ─── */

@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 ─── */

@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");
}


/* ═══════════════════════════════════════════════════════════════════
   GLOBALS — baseline typography + body
   (Aplică tokens-urile pe elementele native HTML)
   ═══════════════════════════════════════════════════════════════════ */


html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-neutral-900);
	background-color: var(--color-neutral-100);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-tight);
	color: var(--color-brand-navy);
	margin: 0 0 var(--space-4) 0;
	letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--text-sm);  font-weight: var(--font-weight-semibold); }

p {
	margin: 0 0 var(--space-4) 0;
	line-height: var(--leading-normal);
}

a {
	color: var(--color-brand-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}

a:hover,
a:focus-visible {
	color: var(--color-brand-primary-dark);
	text-decoration: underline;
}

strong {
	font-weight: var(--font-weight-semibold);
	color: inherit;
}

em {
	font-style: italic;
}

small {
	font-size: var(--text-sm);
	color: var(--color-neutral-600);
}


/* ═══════════════════════════════════════════════════════════════════
   UTILITY — eyebrow pattern (reutilizabil)
   ═══════════════════════════════════════════════════════════════════ */

.eyebrow {
	display: inline-block;
	font-size: var(--eyebrow-size);
	font-weight: var(--eyebrow-weight);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: var(--eyebrow-transform);
	color: var(--color-brand-primary);
	margin-bottom: var(--space-2);
}

.eyebrow--accent {
	color: var(--color-accent);
}

.eyebrow--on-dark {
	color: var(--color-accent);
}


/* ═══════════════════════════════════════════════════════════════════
   UTILITY — focus management (accessibility)
   ═══════════════════════════════════════════════════════════════════ */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════════════════════════════════════
   UTILITY — reduce motion (accessibility)
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}