/* ==========================================================================
   pmi.ro — variabilele de identitate vizuală
   --------------------------------------------------------------------------
   Extrase din design system-ul public PMI (--pmi-dsm-*, citit din CSS-ul de pe
   www.pmi.org, 9 august 2026). Numele păstrează convenția PMI, ca să se poată
   verifica una la una când PMI își schimbă brandul.

   REGULA: nicio culoare și nicio dimensiune scrisă direct într-o pagină.
   Totul referă variabilele de aici.

   Se încarcă din tema copil GeneratePress, înaintea oricărui alt CSS propriu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTUL — Inter 4.1, self-hosted, SIL Open Font License.
   Fișierele sunt în `assets/fonts/`, licența alături, în `LICENSE.txt`.
   OFL cere ca licența să fie distribuită împreună cu fontul — nu se șterge.

   NU de pe Google Fonts: o cerere DNS + TLS către un domeniu terț pe calea
   critică e exact ce încercăm să scoatem, iar transmiterea IP-ului
   vizitatorului către Google e discutabilă sub GDPR.

   Trei greutăți, nu toate cele nouă: 400 text, 500 titluri, 600 accente.

   Am ales variantele STATICE, nu `InterVariable.woff2` (352 KB). Cu fontul
   variabil, niciun text nu se randează în forma finală până nu sosesc toți cei
   352 KB; cu statice, primul paint are nevoie doar de Regular — 109 KB.
   Contează direct pentru ținta de LCP sub 2,5 s din Etapa G.

   Dacă la Etapa G tot e prea mult: fișierele au acoperire Unicode completă și
   se pot reduce cu ~60% subsetate la latin + latin-ext (`pyftsubset`). E o
   optimizare cu măsurători, se face acolo — nu acum, pe presupuneri.
   -------------------------------------------------------------------------- */

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

:root {
  /* ---------------------------------------------------------------------
     CULORI PRIMITIVE — rampele PMI, copiate exact
     --------------------------------------------------------------------- */

  /* Violet — culoarea de brand. PMI NU mai e albastru. */
  --pmi-violet-50:  #efedf3;
  --pmi-violet-100: #e0c8f9;
  --pmi-violet-200: #cc9bfc;
  --pmi-violet-300: #b465ff;
  --pmi-violet-400: #8243d6;
  --pmi-violet-500: #4f17a8;  /* baza rampei */
  --pmi-violet-600: #371075;
  --pmi-violet-700: #2a0c5a;
  --pmi-violet-800: #230a49;
  --pmi-violet-900: #1a0837;
  --pmi-violet-950: #100522;

  /* Aqua — accent rece, pentru linkuri și stări informative */
  --pmi-aqua-50:  #eefafa;
  --pmi-aqua-100: #c8f0f9;
  --pmi-aqua-200: #68d8ed;
  --pmi-aqua-300: #05bfe0;
  --pmi-aqua-400: #0890ba;
  --pmi-aqua-500: #00799e;
  --pmi-aqua-600: #005c77;
  --pmi-aqua-700: #004154;
  --pmi-aqua-800: #023041;
  --pmi-aqua-900: #03202f;
  --pmi-aqua-950: #030d19;

  /* Tangerine — accent cald, folosit rar și deliberat (CTA secundar, badge) */
  --pmi-tangerine-50:  #fef7f3;
  --pmi-tangerine-100: #fddece;
  --pmi-tangerine-200: #ffbc9c;
  --pmi-tangerine-300: #ff630f;
  --pmi-tangerine-400: #eb4d0a;
  --pmi-tangerine-500: #d5340b;
  --pmi-tangerine-600: #a12608;
  --pmi-tangerine-700: #741c06;
  --pmi-tangerine-800: #451409;
  --pmi-tangerine-900: #290906;
  --pmi-tangerine-950: #1a0503;

  /* Neutrale — CALDE, nu gri. Diferența asta face jumătate din caracterul PMI. */
  --pmi-neutral-50:  #f7f4ef;  /* fundalul paginii pe pmi.org */
  --pmi-neutral-100: #e7e4dc;  /* fundal de secțiune alternativă */
  --pmi-neutral-200: #cfcbc2;
  --pmi-neutral-300: #a8a6a1;
  --pmi-neutral-400: #737373;
  --pmi-neutral-500: #666666;
  --pmi-neutral-600: #4d4d4d;
  --pmi-neutral-700: #333333;
  --pmi-neutral-800: #2c2c2c;
  --pmi-neutral-900: #232323;
  --pmi-neutral-950: #1a1a1a;

  /* Saddle: nisipiu cald. PMI îl folosește pentru certificările specializate. */
  --pmi-saddle-50:  #fff2e8;
  --pmi-saddle-100: #f4e5db;
  --pmi-saddle-200: #e0cec1;
  --pmi-saddle-300: #ceb7a6;
  --pmi-saddle-400: #d3ad90;
  --pmi-saddle-500: #be9577;
  --pmi-saddle-600: #a4724d;
  --pmi-saddle-700: #804f29;
  --pmi-saddle-800: #4a2d17;
  --pmi-saddle-900: #2e1c0f;
  --pmi-saddle-950: #1b0e04;

  --pmi-alb: #ffffff;

  /* Cerneala. Nu e din nicio rampă — e o culoare proprie, violet-negru.
     Ea, nu violet-500, e culoarea reală a textului și a butoanelor pline. */
  --pmi-ink: #200f3b;

  /* Semantice: verde și roșu, pentru stări. */
  --pmi-succes: #197f10;
  --pmi-eroare: #c41e08;

  /* ---------------------------------------------------------------------
     CULORI SEMANTICE — folosește-le pe astea în pagini, nu primitivele
     --------------------------------------------------------------------- */
  --pmi-fundal:            var(--pmi-neutral-50);
  --pmi-fundal-alternativ: var(--pmi-neutral-100);
  --pmi-fundal-card:       var(--pmi-alb);
  --pmi-fundal-inchis:     var(--pmi-violet-950);

  --pmi-text:              var(--pmi-ink);
  --pmi-text-secundar:     var(--pmi-neutral-600);
  --pmi-text-pe-inchis:    var(--pmi-alb);

  --pmi-link:              var(--pmi-violet-500);
  --pmi-link-hover:        var(--pmi-violet-400);
  --pmi-link-pe-inchis:       var(--pmi-aqua-300);
  --pmi-link-pe-inchis-hover: var(--pmi-aqua-200);

  --pmi-linie:             var(--pmi-neutral-200);
  --pmi-focus:             var(--pmi-violet-400);

  /* ---------------------------------------------------------------------
     TIPOGRAFIE
     PMI folosește Aeonik și Agrandir — fonturi comerciale, cu licență.
     Noi NU le putem găzdui. Folosim Inter, care e în stiva PMI, e liber
     (SIL OFL) și are diacriticele româneşti cu virgulă (ș ț) corecte.
     Vezi docs/08-identitate-vizuala.md pentru raționament.
     --------------------------------------------------------------------- */
  --pmi-font-titlu: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pmi-font-text:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Scara, măsurată pe pmi.org la 1792 px. Perechile mărime/interlinie sunt
     ale lor: strâns la titluri (1,1), aerisit la text curent (1,5). */
  --pmi-text-2xs: 0.75rem;   --pmi-lh-2xs: 1rem;      /* 12/16 */
  --pmi-text-xs:  0.875rem;  --pmi-lh-xs:  1.25rem;   /* 14/20 */
  --pmi-text-sm:  1rem;      --pmi-lh-sm:  1.5rem;    /* 16/24 — baza */
  --pmi-text-md:  1.125rem;  --pmi-lh-md:  1.5rem;    /* 18/24 */
  --pmi-text-lg:  1.5rem;    --pmi-lh-lg:  2rem;      /* 24/32 */
  --pmi-text-xl:  2rem;      --pmi-lh-xl:  2.25rem;   /* 32/36 */
  --pmi-text-2xl: 2.5rem;    --pmi-lh-2xl: 2.75rem;   /* 40/44 */
  --pmi-text-3xl: 3.5rem;    --pmi-lh-3xl: 3.75rem;   /* 56/60 — hero */

  /* Titlurile de pe pmi.org sunt w500, nu bold. Detaliu care contează:
     bold-ul le face să arate ca altă marcă. */
  --pmi-greutate-titlu: 500;
  --pmi-greutate-text:  400;
  --pmi-greutate-accent: 600;

  /* ---------------------------------------------------------------------
     SPAȚIERE — scara PMI, pas de 4 px
     --------------------------------------------------------------------- */
  --pmi-sp-1:  0.25rem;   /*  4 */
  --pmi-sp-2:  0.5rem;    /*  8 */
  --pmi-sp-3:  0.75rem;   /* 12 */
  --pmi-sp-4:  1rem;      /* 16 */
  --pmi-sp-5:  1.5rem;    /* 24 */
  --pmi-sp-6:  2rem;      /* 32 */
  --pmi-sp-7:  2.5rem;    /* 40 */
  --pmi-sp-8:  3rem;      /* 48 */
  --pmi-sp-9:  4rem;      /* 64 */
  --pmi-sp-10: 5rem;      /* 80 */
  --pmi-sp-11: 6rem;      /* 96 */
  --pmi-sp-12: 8rem;      /* 128 */

  /* ---------------------------------------------------------------------
     FORMĂ
     Rotunjirile PMI sunt mari. E semnătura vizuală cea mai ușor de ratat:
     un card cu 4 px rotunjire nu arată a PMI, oricâtă culoare ar avea.
     --------------------------------------------------------------------- */
  --pmi-raza-xs:   0.25rem;  /*  4 — input-uri mici, badge-uri */
  --pmi-raza-sm:   0.5rem;   /*  8 */
  --pmi-raza-md:   0.75rem;  /* 12 */
  --pmi-raza-lg:   1.5rem;   /* 24 — carduri, secțiuni */
  --pmi-raza-xl:   2.5rem;   /* 40 — blocuri mari, imagini hero */
  --pmi-raza-2xl:  4rem;     /* 64 */
  --pmi-raza-plin: 9999px;   /* butoane — toate butoanele sunt pastile */

  /* PMI nu folosește umbre. Ierarhia se face din fundal, nu din elevație.
     Variabila există doar ca să existe un răspuns când cineva cere umbră. */
  --pmi-umbra: none;

  /* Lățimi de conținut */
  --pmi-lat-continut: 1280px;
  --pmi-lat-text:     68ch;   /* pentru articole — lizibilitate, nu lățime maximă */

  /* Tranziții */
  --pmi-tranzitie: 150ms ease;
}

/* ==========================================================================
   APLICAREA
   Minimul necesar ca variabilele să însemne ceva. Restul stă în șabloanele
   GeneratePress și în GenerateBlocks.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--pmi-fundal);
  color: var(--pmi-text);
  font-family: var(--pmi-font-text);
  font-size: var(--pmi-text-sm);
  line-height: var(--pmi-lh-sm);
  font-weight: var(--pmi-greutate-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pmi-font-titlu);
  font-weight: var(--pmi-greutate-titlu);
  color: var(--pmi-text);
  margin-block: 0 var(--pmi-sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--pmi-text-2xl); line-height: var(--pmi-lh-2xl); }
h2 { font-size: var(--pmi-text-xl);  line-height: var(--pmi-lh-xl); }
h3 { font-size: var(--pmi-text-lg);  line-height: var(--pmi-lh-lg); }
h4 { font-size: var(--pmi-text-md);  line-height: var(--pmi-lh-md); }
h5, h6 { font-size: var(--pmi-text-sm); line-height: var(--pmi-lh-sm); }

p { margin-block: 0 var(--pmi-sp-4); max-width: var(--pmi-lat-text); }

a { color: var(--pmi-link); text-underline-offset: 0.2em; transition: color var(--pmi-tranzitie); }
a:hover { color: var(--pmi-link-hover); }

/* Focus vizibil peste tot. Nu se scoate — e cerință de accesibilitate,
   nu preferință de design. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--pmi-focus);
  outline-offset: 2px;
  border-radius: var(--pmi-raza-xs);
}

/* --- Butoane: pastile, fără umbră, 24 px padding lateral ---------------- */
.pmi-buton {
  display: inline-flex;
  align-items: center;
  gap: var(--pmi-sp-2);
  min-height: 48px;                       /* țintă de atingere pe mobil */
  padding-inline: var(--pmi-sp-5);
  border: 2px solid transparent;
  border-radius: var(--pmi-raza-plin);
  font: inherit;
  font-size: var(--pmi-text-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pmi-tranzitie), color var(--pmi-tranzitie),
              border-color var(--pmi-tranzitie);
}

.pmi-buton--primar {
  background-color: var(--pmi-ink);
  color: var(--pmi-alb);
}
.pmi-buton--primar:hover {
  background-color: var(--pmi-violet-500);
  color: var(--pmi-alb);
}

.pmi-buton--secundar {
  background-color: var(--pmi-alb);
  color: var(--pmi-ink);
}
.pmi-buton--secundar:hover {
  background-color: var(--pmi-neutral-100);
  color: var(--pmi-ink);
}

.pmi-buton--contur {
  background-color: transparent;
  color: var(--pmi-ink);
  border-color: var(--pmi-ink);
}
.pmi-buton--contur:hover {
  background-color: var(--pmi-ink);
  color: var(--pmi-alb);
}

/* Pe fundal închis se inversează. */
.pmi-pe-inchis .pmi-buton--primar   { background-color: var(--pmi-alb); color: var(--pmi-ink); }
.pmi-pe-inchis .pmi-buton--primar:hover { background-color: var(--pmi-aqua-200); }
.pmi-pe-inchis .pmi-buton--contur   { color: var(--pmi-alb); border-color: var(--pmi-alb); }
.pmi-pe-inchis .pmi-buton--contur:hover { background-color: var(--pmi-alb); color: var(--pmi-ink); }

/* --- Secțiuni și carduri ------------------------------------------------ */
.pmi-sectiune         { padding-block: var(--pmi-sp-10); }
.pmi-sectiune--alt    { background-color: var(--pmi-fundal-alternativ); }
.pmi-sectiune--inchis { background-color: var(--pmi-fundal-inchis); color: var(--pmi-text-pe-inchis); }

.pmi-pe-inchis,
.pmi-sectiune--inchis :where(h1, h2, h3, h4, h5, h6, p) { color: var(--pmi-text-pe-inchis); }
.pmi-sectiune--inchis a:not(.pmi-buton) { color: var(--pmi-link-pe-inchis); }
.pmi-sectiune--inchis a:not(.pmi-buton):hover { color: var(--pmi-link-pe-inchis-hover); }

.pmi-container {
  max-width: var(--pmi-lat-continut);
  margin-inline: auto;
  padding-inline: var(--pmi-sp-5);
}

.pmi-card {
  display: flex;
  flex-direction: column;
  background-color: var(--pmi-fundal-card);
  border-radius: var(--pmi-raza-lg);
  padding: var(--pmi-sp-6);
  box-shadow: var(--pmi-umbra);
}

/* Într-un rând de carduri, butonul stă la bază indiferent cât text e deasupra.
   Fără asta, trei carduri alăturate au CTA-urile la înălțimi diferite. */
.pmi-card > .pmi-buton:last-child { margin-block-start: auto; align-self: flex-start; }
.pmi-card > *:last-child { margin-block-end: 0; }

/* --- Formulare ---------------------------------------------------------- */
.pmi-camp {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--pmi-sp-3) var(--pmi-sp-4);
  background-color: var(--pmi-alb);
  border: 1px solid var(--pmi-neutral-300);
  border-radius: var(--pmi-raza-md);
  font: inherit;
  color: var(--pmi-text);
}
.pmi-camp::placeholder { color: var(--pmi-neutral-400); }
.pmi-camp[aria-invalid="true"] { border-color: var(--pmi-eroare); border-width: 2px; }

.pmi-eticheta {
  display: block;
  margin-block-end: var(--pmi-sp-2);
  font-size: var(--pmi-text-xs);
  font-weight: var(--pmi-greutate-accent);
}

/* --- Mobil: titlurile mari nu încap ------------------------------------- */
@media (max-width: 48rem) {
  :root {
    --pmi-text-3xl: 2.25rem;  --pmi-lh-3xl: 2.5rem;
    --pmi-text-2xl: 1.875rem; --pmi-lh-2xl: 2.125rem;
    --pmi-text-xl:  1.5rem;   --pmi-lh-xl:  1.75rem;
  }
  .pmi-sectiune { padding-block: var(--pmi-sp-8); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}