/**
 * app-tokens.css — Vocal Lab, profudecanto.ro
 *
 * SINGURUL loc din aplicație în care are voie să apară o culoare, o umbră, o
 * rază de colț, o spațiere sau o familie de font scrisă ca valoare.
 * Orice componentă folosește exclusiv var(--...). Zero excepții.
 *
 * 13.08.2026 — a venit designul final („Profu' de Canto", 28 de ecrane) și
 * fișierul acesta a fost înlocuit, exact cum fusese prevăzut. Aplicația nu
 * s-a rescris: numele variabilelor sunt aceleași, s-au schimbat valorile.
 * Violetul și gradientul din machete INTRĂ acum — sunt sistemul, nu o
 * sugestie.
 *
 * Două decizii care nu se văd din listă:
 *
 * 1. --app-accent e LAVANDA, nu magenta. Accentul e folosit și ca text pe
 *    fundal întunecat (legături, cifre, pastile), și ca umplere sub text
 *    întunecat (butonul principal). Magenta trece la umplere, dar cade sub
 *    4.5:1 ca text; lavanda trece în ambele sensuri — 9:1 într-un caz, 9:1
 *    în celălalt. Magenta rămâne pentru hover, unde e mereu mare și scurt.
 *
 * 2. --app-accent-contra e aproape negru, nu alb: acum accentul e o culoare
 *    DESCHISĂ, deci textul de deasupra lui coboară, nu urcă.
 */

:root {
  /* ── Suprafețe, temă întunecată ─────────────────────────────
     Pe întunecat suprafețele se separă prin luminozitate, nu prin chenare. */
  --app-fundal:        #04060E;
  --app-suprafata:     #121827;
  --app-suprafata-2:   #1A2133;
  --app-ridicat:       #232B3E;
  --app-linie:         rgba(255, 255, 255, 0.08);
  --app-linie-tare:    rgba(255, 255, 255, 0.16);

  /* ── Text ────────────────────────────────────────────────── */
  --app-text:          #FFFFFF;
  --app-text-2:        #A7AEC0;
  --app-text-3:        #6E7691;

  /* ── Accent: unul singur, folosit rar ─────────────────────── */
  --app-accent:        #C9A5FF;
  --app-accent-tare:   #FF2D95;
  --app-accent-contra: #0A0A12;
  --app-accent-slab:   rgba(138, 43, 226, 0.18);

  /* Gradientul de brand. Nu poate sta într-o variabilă de culoare (nu e o
     culoare), deci are variabila lui și se folosește doar ca background. */
  --app-grad:          linear-gradient(90deg, #8A2BE2, #FF2D95);
  --app-grad-diag:     linear-gradient(135deg, #8A2BE2, #FF2D95);
  --app-grad-contra:   #FFFFFF;   /* textul de pe gradient e alb, nu întunecat */

  /* ── Semantice. Culoarea e informație, niciodată decor.
     Roșu = „ce faci acum". Verde = „ținta". Nu se folosesc pentru
     butoane de ștergere sau pentru mesaje de succes. ───────── */
  --app-acum:          #FF6B6B;
  --app-acum-slab:     rgba(255, 107, 107, 0.16);
  --app-tinta:         #3BD07A;
  --app-tinta-slab:    rgba(59, 208, 122, 0.16);

  /* Nivelurile de produs, aceleași trei ca pe site-ul public:
     violet → magenta → auriu. */
  --app-nivel-1:       #C9A5FF;
  --app-nivel-2:       #FF2D95;
  --app-nivel-3:       #E8C766;

  /* ── Tipografie ─────────────────────────────────────────────
     Designul nou nu are font cu serife. --app-serif rămâne definit, ca
     regulile care îl folosesc să nu cadă pe fontul implicit al sistemului,
     dar arată spre aceeași familie ca restul. Mono rămâne pentru cifre. */
  --app-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --app-sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --app-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --app-logo:  "Big Shoulders", "Big Shoulders Display", Impact, sans-serif;

  --app-tf-mic:    0.75rem;
  --app-tf-mic-2:  0.8125rem;
  --app-tf-baza:   0.875rem;
  --app-tf-mediu:  1rem;
  --app-tf-mare:   1.375rem;
  --app-tf-titlu:  2.125rem;
  --app-tf-cifra:  3rem;

  --app-ls-mono: 0.2em;      /* etichetele sunt versale, rărite, 600 */
  --app-ls-titlu: -0.025em;  /* titlurile sunt strânse, nu rărite */
  --app-ir-strans: 1.15;
  --app-ir-baza:   1.7;

  /* ── Spațiere. Scară de 4px; nimic între trepte. ──────────── */
  --app-sp-1: 4px;
  --app-sp-2: 8px;
  --app-sp-3: 12px;
  --app-sp-4: 16px;
  --app-sp-5: 24px;
  --app-sp-6: 32px;
  --app-sp-7: 48px;
  --app-sp-8: 64px;

  /* ── Colțuri. Card 14-16 · buton 10-11 · chip 7-9 · pastilă 99. ── */
  --app-raza-mic:  8px;
  --app-raza:      11px;
  --app-raza-mare: 16px;
  --app-raza-rot:  999px;

  /* ── Umbre. Designul evită umbrele; separarea se face prin culoare de
     fundal și chenar subțire. Excepția sunt glow-urile de brand. ── */
  --app-umbra:      0 1px 2px rgba(0, 0, 0, 0.45);
  --app-umbra-mare: 0 12px 40px rgba(0, 0, 0, 0.55);
  --app-glow:       0 12px 40px rgba(138, 43, 226, 0.35);

  /* ── Măsuri de aranjare ───────────────────────────────────── */
  /* 280, nu 244 (04.09): la 244 rămâneau 146px pentru text, iar șapte intrări
     cereau 149-179px — „Antrenamentul zilnic" și „Cronometrul de suflu" se
     rupeau pe două rânduri. Cu 280 și cu bara de derulare subțiată la 8px ies
     ~190px, adică toate încap pe un rând, cu rezervă. */
  --app-lat-sidebar: 280px;
  --app-lat-continut: 1180px;
  --app-lat-ingust: 420px;
  --app-atingere: 44px;          /* ținta minimă de atingere, obligatorie */
  --app-bara-jos: 60px;          /* bara de navigare de pe telefon */
  /* Înălțimea barei de sus. MĂSURATĂ în browser (66,95px), nu estimată din
     padding: comentariul din antet.css spune „~62px", iar cu 62 primul grup al
     barei laterale intra 5px sub antet la derulare. O valoare aproximativă
     într-un calc() de poziționare nu dă o eroare, dă o suprapunere. */
  --app-antet: 67px;

  /* ── Valori cerute de assets/antet.css ───────────────────────
     15.08.2026: bara de sus a site-ului se afișează acum și în aplicație,
     din același fișier de stil. Cele de mai jos sunt singurele valori de
     care are nevoie și care nu existau deja aici. NU se rescriu cele care
     există (alb, text-2, linie-tare, gradientul, fonturile) — acelea se
     leagă prin blocul de echivalențe de la finalul fișierului. */
  --app-linie-fina:    rgba(255, 255, 255, 0.06);
  --app-violet-moale:  #9A7DD8;
  --app-lila-text:     #E7E3FF;
  --app-linie-violet:  rgba(138, 43, 226, 0.5);
  --app-lat-antet:     74rem;    /* identic cu --lat din temă: antetul se aliniază la fel în ambele cadre */

  --app-tranzitie: 160ms ease;
  --app-inel-gros: 7;            /* grosimea inelului de progres, în unități SVG */
}

/* Cine preferă mai puțină mișcare o primește. */
@media (prefers-reduced-motion: reduce) {
  :root { --app-tranzitie: 0ms; }
}

/**
 * ECHIVALENȚE PENTRU assets/antet.css
 *
 * Antetul site-ului e scris o singură dată, în assets/antet.css, și se
 * afișează în două cadre: paginile de citit (unde numele de mai jos vin din
 * :root-ul temei) și aplicația (unde nu există style.css deloc). Blocul ăsta
 * leagă numele temei de tokenurile aplicației, ca fișierul de antet să nu
 * trebuiască să știe în care dintre cadre se află.
 *
 * Sunt LEGĂTURI, nu valori: fiecare arată către un token definit mai sus.
 * O valoare scrisă aici a doua oară ar însemna un antet care se desparte în
 * două după prima modificare — exact ce evită mutarea în antet.css.
 *
 * SCOPUL e .app-corp, NU :root, și asta contează: pe pagina unui instrument
 * deschisă din Vocal Lab se încarcă și style.css, și fișierul ăsta. La :root,
 * legăturile de mai jos ar suprascrie variabilele temei pe toată pagina —
 * inclusiv --text, folosit de tot conținutul. Pe .app-corp se aplică numai
 * în cadrul aplicației, iar pagina de instrument își păstrează valorile temei.
 */
.app-corp {
  --sans:            var(--app-sans);
  --logo:            var(--app-logo);
  --alb:             var(--app-text);
  --text:            var(--app-text-2);
  --lat:             var(--app-lat-antet);
  --grad:            var(--app-grad);
  --ch-fin:          var(--app-linie-fina);
  --ch-buton:        var(--app-linie-tare);
  --ch-violet-tare:  var(--app-linie-violet);
  --violet-moale:    var(--app-violet-moale);
  --lila-text:       var(--app-lila-text);
}