/* ============================================================
   AVATAR STUDIO — Design Tokens
   Toate variabilele globale CSS sunt definite aici.
   Nu adăuga proprietăți specifice de componentă în acest fișier.
   ============================================================ */

:root {
  /* ── Culori de fundal ── */
  --bg: #0f0f0f;
  --bg-card: #1a1a1a;
  --bg-surface: #141414;

  /* ── Accent (portocaliu logo) ── */
  --accent: #f6af1d;
  --accent-hover: #e09c10;
  --accent-rgb: 246, 175, 29; /* pentru rgba() */

  /* ── Text ── */
  --text: #f0ece6;
  --text-muted: #9a9087;
  --text-dark: #0f0f0f;

  /* ── Borduri ── */
  --border: #2a2520;
  --border-light: #222222;

  /* ── Tipografie ── */
  --font-heading: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ── Spațiere ── */
  --section-pad: clamp(18px, 2.5vw, 40px);
  --max-width: 1280px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ── Forme ── */
  --radius: 4px;
  --radius-lg: 8px;

  /* ── Tranziții ── */
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-fast: 0.15s ease;

  /* ── Umbre ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* ── Z-index stratificat ── */
  --z-base: 1;
  --z-overlay: 10;
  --z-modal: 100;
  --z-header: 200;
  --z-toast: 300;
}

/* ============================================================
   ATENȚIE — media queries într-un fișier plain-CSS (fără preprocesor)

   1) O regulă `@media` care suprascrie o proprietate deja definită într-o
      regulă de bază (fără media query) TREBUIE plasată DUPĂ acea regulă de
      bază, în același fișier. La specificitate egală, CSS-ul rezolvă
      conflictele după ORDINEA DIN SURSĂ, nu după cât de restrictiv e
      media query-ul — o regulă `@media` pusă înainte e ignorată silențios,
      fără nicio eroare. (Bug găsit și reparat în why.css: un
      `@media (max-width:1440px){.why__img{...}}` pus înaintea regulii de
      bază `.why__img{...}` nu avea niciun efect, deși sintaxa era corectă.)

   2) `var(--custom-property)` NU poate fi folosit în interiorul condiției
      unui `@media` (ex. `@media (max-width: var(--x))` e invalid) — de
      aceea pragurile de breakpoint sunt valori fixe, repetate manual în
      fiecare fișier, nu variabile de aici.

   3) Tipar recurent — secțiuni cu layout 2 coloane (text + imagine),
      cadru decorativ offset și/sau badge plutitor. Un prim fix (acum
      înlocuit) plafona imaginea cu `max-height` în vh, ghicit per breakpoint
      — dar asta lăsa imaginea "orfană": mai scundă decât coloana de text
      alăturată, cu gol vizual dedesubt și crop inconsecvent între viewporturi.
      Soluția corectă, în vigoare acum: imaginea NU mai are aspect-ratio/
      max-height proprii — ia `height: 100%` de la un wrapper cu `height:100%`,
      iar grid-ul părinte are `align-items: stretch` (nu `center`/`start`),
      astfel încât coloana de imagine ia mereu EXACT înălțimea coloanei de
      text, pe orice combinație de viewport + conținut, fără niciun vh/
      breakpoint ghicit. Un `min-height` (~340px) pe wrapper e singura plasă
      de siguranță, pentru cazul rar cu text foarte scurt.
      La breakpoint-ul unde coloanele se stivuiesc (1 coloană), acest
      raționament nu se mai aplică — acolo TREBUIE resetat explicit
      `height: auto` (pe wrapper și pe imagine) și reintrodus un
      `aspect-ratio` fix, altfel `height:100%` rezolvă la 0 într-un rând de
      grid cu o singură coloană (înălțime indefinită/circulară).
      Fișiere/selectori cu acest tipar (toate ar trebui să rămână
      consecvente între ele — o corecție la unul e un semnal să verifici
      și celelalte):
        - why.css → .why__media/.why__img-wrap/.why__img
        - school.css → .school__media/.school__img-wrap/.school__img
        - service-landing.css → .svc-about__media/.svc-about__img, .svc-why__media/.svc-why__img
        - scoala-landing.css → .sl-about__media/.sl-about__img, .sl-atmosphere__media/.sl-atmosphere__img, .sl-results__media/.sl-results__img
        - text-blocks.css → .text-image__media/.text-image__img
   ============================================================ */