/* ==========================================================================
   tokens.css — sursa unică de adevăr pentru culoare, tipografie și spațiere.
   Nicio valoare "magică" nu are voie să apară în restul foilor de stil.
   ========================================================================== */

:root {
  /* --- Culori de produs (coduri RAL reale, folosite la desenele tehnice) --- */
  --ral-7016: #383e42; /* Gri antracit */
  --ral-8014: #4a3526; /* Maro deschis (sepia) */
  --ral-8019: #3d3635; /* Maro închis (gri-maro) */
  --ral-9016: #f1f0ea; /* Alb trafic */

  /* Aici a stat o scară de unsprezece neutre închise, derivată din antracit.
     Alimenta exclusiv tema întunecată; odată cu ea a rămas fără niciun
     consumator, așa că a fost ștearsă în loc să fie păstrată „pentru mai
     târziu”. Valorile de hârtie sunt scrise direct la rolurile semantice. */

  /* --- Culorile mărcii, luate din logo ---------------------------------
     Verdele și portocaliul sunt cele două culori ale siglei ABBA CONFORT.
     Restul paletei se construiește în jurul lor.

     Fiecare are DOUĂ variante, iar distincția nu e stilistică, ci de lizibilitate:
     nuanța de marcă e cea din siglă și se folosește la suprafețe, contururi și
     iconuri; nuanța `-txt` este închisă la culoare cât să treacă pragul WCAG AA
     pentru text mic pe hârtie. Portocaliul mărcii, pus sub un text de 12 px,
     ajunge pe la 2:1 — ilizibil. De aceea nu se folosește niciodată direct
     pentru text.                                                             */
  --brand-green:  #006054;
  --brand-orange: #fc9c30;

  --green-hi:  #7ed9a6;
  --green:     #4fb783;
  --green-dim: #3a9c72;
  --green-lo:  #0d5c4e;   /* verdele siglei; contrast 8,3:1 pe hârtie */

  --orange:     var(--brand-orange);
  --orange-hi:  #ffb85a;
  /* Portocaliu pentru TEXT. Închis de la #9a530a odată cu adâncirea benzilor:
     pe verdele #c2dcb1 numerele de rubrică — corp de 12 px — cădeau la 3,92:1,
     sub pragul AA. Valoarea de acum trece pe TOATE cele patru fundaluri ale
     paginii: 4,97 pe verde, 4,86 pe portocaliu, 7,18 pe alb, 6,58 pe hârtie. */
  --orange-txt: #7a3f06;

  /* --- Benzile paginii, numărate de jos în sus ---
     Subsolul e portocaliu, secțiunea de deasupra verde, următoarea albă, și tot
     așa. Sunt TENTE ale culorilor mărcii, nu culori pline: la saturație mare
     fundalul ar concura cu produsul, care e chiar lucrul de privit.
     Procentele mici sunt intenționate — verificate pe hârtie, nu ghicite.
     Regula care le distribuie e în `components.css`, „Ritmul benzilor”. */
  /* Valori scrise direct, NU amestecuri cu alb.
     Amestecul a fost greșeala: verdele mărcii (#0d5c4e) are nuanța 170°, adică
     e un verde-albastru. Diluat spre alb, partea albastră rămâne și rezultatul
     se citește gri-albastru, nu verde. La fel, portocaliul diluat prea mult
     alunecă spre roz, fiindcă la saturație joasă ochiul nu mai distinge 32° de
     roșu-pal.
     Nuanțele de mai jos sunt verificate: verdele la 95°, adică verde-frunză
     fără urmă de albastru; portocaliul la 33°, cald și clar.

     Adâncite încă o treaptă față de varianta anterioară (#d3e5c6 / #fbd9b0):
     benzile se citeau ca o umbră a hârtiei, nu ca o culoare. Nuanța rămâne
     aceeași — s-a coborât doar luminozitatea, deci ritmul paginii se vede fără
     ca fundalul să concureze cu produsul. Verificarea de contrast e mai jos, la
     `--ink-faint`: o bandă mai saturată cere cerneală mai închisă. */
  --band-alb:        #fdfcfa;
  /* Chiar culorile mărcii, la cerere. Verdele e destul de închis cât să ceară
     text ALB — cu cerneala obișnuită dă 2,40, adică nelizibil. Portocaliul e
     invers: text închis, 8,51; pe el albul ar da 2,11. De aceea cele două
     benzi își aleg cerneala separat, mai jos în components.css. */
  --band-verde:      var(--brand-green);
  --band-portocaliu: var(--brand-orange);

  /* --- Reducerile: verdele mărcii, nu roșu ---
     Fondul insignei de reducere. A fost cărămiziu (#b8401d) — culoarea prin
     care interfețele semnalează o eroare sau o pierdere. Pe o cartelă de
     produs, o pată roșie e citită mai întâi ca avertisment și abia apoi ca
     ofertă; verdele spune „câștigi”, ceea ce chiar se întâmplă.

     Este exact verdele siglei, nu o nuanță apropiată: reducerea e un mesaj al
     firmei, nu o categorie separată de informație.

     Contrastul e mai bun decât înainte, nu doar acceptabil — textul alb de
     10 px ajunge la 7,90:1, față de 5,54:1 cât dădea cărămiziul. */
  --reducere: var(--brand-green);

  /* --- Roluri semantice ---
     Site-ul are o singură temă: hârtie caldă, nu alb clinic — se potrivește cu
     aluminiul ușilor și cu albul din siglă. */
  --bg:          #f4f2ed;
  --bg-raised:   #fbfaf7;
  --bg-sunken:   #e8e5dd;
  --surface:     #ffffff;
  --surface-hi:  #fbfaf7;
  --line:        #dcd8ce;
  --line-strong: #c3beb1;
  --ink:         #14171a;
  --ink-muted:   #42494d;
  /* Închis de la #5f6669 odată cu adâncirea benzilor: pe verdele #c9d7d1
     supratitlurile cădeau la 3,9:1, iar titlurile din subsol la 4,5 fix, adică
     pe muchie. O bandă mai saturată cere cerneală mai închisă — altfel textul
     mic e primul care se pierde. */
  --ink-faint:   #3d4448;
  --acc:         var(--brand-green);
  --acc-ink:     #f4fbf6;
  --acc-2:       var(--brand-orange);
  --acc-2-ink:   #3b2405;
  /* Procentul scris lângă preț și în comutator. Verde, ca insigna — aceeași
     informație, deci aceeași culoare. Verificat pe toate cele patru benzi ale
     paginii: cel mai slab caz e 5,21:1 pe banda portocalie, peste pragul AA. */
  --sale:        var(--brand-green);

  --shadow-1: 0 1px 2px rgb(20 23 26 / 0.06);
  --shadow-2: 0 4px 16px -4px rgb(20 23 26 / 0.1), 0 1px 2px rgb(20 23 26 / 0.06);
  --shadow-3: 0 24px 60px -20px rgb(20 23 26 / 0.22), 0 4px 12px rgb(20 23 26 / 0.08);

  /* Emblema firmei, ca filigran pe fundalul întregii pagini.

     Era un desen SVG cu unelte, făcut de mine; clientul a cerut emblema
     ADEVĂRATĂ, cea de pe materialele firmei. Un singur semn, repetat, se
     citește ca un tipar de marcă; patru obiecte diferite se citeau ca o
     colecție.

     Dala are 560 px și poartă DOAR camionul, de două ori, decalat pe
     diagonală. Textul „ABBA CONFORT DELIVERY SRL / MEREU MAI DEVREME” a fost
     scos la cerere: la mărimea la care se repetă în fundal era oricum
     nelizibil, iar pe telefon cădea sub titlul eroului și se citeau două
     texte suprapuse. Opacitatea e 0,5, coaptă în canalul alfa — în CSS nu se
     poate da opacitate unui singur strat de fundal, iar `opacity` pe `body`
     ar estompa toată pagina.

     Se REGENEREAZĂ, nu se editează de mână:  node build-fundal.js
     Sursa neatinsă, cu text cu tot, e `fundal-emblema-sursa.png`. */
  --unelte: url("../img/fundal-emblema.png");

  /* Textura peliculei — sparge planurile plate fără să ceară o imagine. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

  /* --- Tipografie --- */
  --font-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* Scară fluidă, raport 1.22 la mobil → 1.29 la desktop. */
  --t--2: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
  --t--1: clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
  --t-0:  clamp(0.938rem, 0.91rem + 0.14vw, 1rem);
  --t-1:  clamp(1.063rem, 1rem + 0.31vw, 1.188rem);
  --t-2:  clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
  --t-3:  clamp(1.5rem, 1.31rem + 0.94vw, 2rem);
  --t-4:  clamp(1.875rem, 1.53rem + 1.72vw, 2.75rem);
  --t-5:  clamp(2.25rem, 1.66rem + 2.97vw, 3.875rem);
  /* Plafon deliberat scăzut. La 5,75rem titlul eroului ocupa 620 px pe un
     ecran de laptop — adică tot primul ecran, iar desenul ușii ajungea sub
     pliu. Un titlu care nu încape lângă imagine nu e un titlu mare, e o
     pagină goală. */
  --t-6:  clamp(2.25rem, 1.15rem + 3.9vw, 4.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-base:  1.6;

  /* --- Spațiere: bază de 4px, sărituri armonice --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Ritmul vertical al secțiunilor. Ținut strâns intenționat: pe ecrane late,
     spațierea generoasă se transformă în pagină goală. */
  --section-y: clamp(3rem, 1.9rem + 5.2vw, 5.5rem);

  /* --- Geometrie --- */
  --r-1: 2px;  --r-2: 4px;  --r-3: 8px;  --r-4: 14px;  --r-full: 999px;

  /* Lățimi de coloană */
  --measure: 68ch;
  --wrap: 1240px;
  --wrap-wide: 1480px;
  --gutter: clamp(1.125rem, 0.7rem + 2.1vw, 2.5rem);

  /* --- Mișcare --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-1: 120ms;  --d-2: 220ms;  --d-3: 380ms;  --d-4: 620ms;

  /* O singură temă. Declarația împiedică browserul să întunece singur
     controalele de formular pe un sistem setat pe întuneric — altfel câmpurile
     din finalizarea comenzii ar apărea negre pe o pagină de hârtie. */
  color-scheme: light;
}