/* tokens.css — Pro Instal Grup
 * Sursa unică de adevăr pentru culoare, tipografie, spacing, umbre (CLAUDE.md §3, §8).
 * Niciun hex hardcodat în componente (checklist §19).
 *
 * PROVIZORIU (06.10.2026): nu avem încă nicio fotografie a lor, deci paleta nu e derivată din
 * poze de șantier (§17 pasul 4). E derivată din singurul material real: logo-ul, măsurat pe
 * pixeli (k-means pe refs/site-vechi/logo-1.jpg și proinstal-small-logo.png) — galben #F4CF14 /
 * #FECE05, albastru regal #1232C5, bleumarin #1C3F85, turcoaz #40A5C0 — plus culorile reale ale
 * materialelor de pe șantier: țeava RAUTHERM S e roșie (RAL 3000), placa Varionova e neagră.
 * Când vin pozele lor, neutrele se refac pe k-means; scara termică rămâne.
 */

@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/FunnelDisplay-var.woff2') format('woff2-variations'),
       url('assets/fonts/FunnelDisplay-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/FunnelSans-var.woff2') format('woff2-variations'),
       url('assets/fonts/FunnelSans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/AzeretMono-var.woff2') format('woff2-variations'),
       url('assets/fonts/AzeretMono-var.woff2') format('woff2');
}

:root {
  /* --- Paletă: site-ul luminos ---------------------------------------------------
     „Șapa": gri rece, în nuanța bleumarinului din logo — nu crem (§6). */
  --c-sapa:          #ECEEF1;   /* fundalul */
  --c-sapa-2:        #E0E3E9;   /* secțiune adâncită */
  --c-alb:           #F8F9FB;   /* suprafață ridicată */
  --c-cerneala:      #0D1533;   /* textul: bleumarinul din logo, aproape negru */
  --c-cerneala-2:    #464F6B;   /* text secundar */
  --c-albastru:      #1232C5;   /* albastrul regal din logo: legături, accent rece */
  --c-galben:        #FECE05;   /* galbenul din logo: butonul de acțiune, „aici e cald" */
  --c-galben-2:      #F4CF14;
  --c-linie:         rgb(13 21 51 / .14);
  --c-linie-tare:    rgb(13 21 51 / .32);

  /* --- Paletă: noaptea (scena termică și finalul — se cheltuiește rar) ----------- */
  --c-noapte:        #070B2E;
  --c-noapte-2:      #0E1544;
  --c-lumina:        #EEF0F7;   /* text pe noapte */
  --c-lumina-2:      #A9B0CC;   /* text secundar pe noapte */
  --c-linie-noapte:  rgb(238 240 247 / .16);

  /* --- Materialele de pe șantier (faza „înainte de șapă") ------------------------- */
  --c-placa:         #16181C;   /* placa cu nuturi Varionova: folie neagră */
  --c-nut:           #2B2F37;   /* nuturile, în lumină */
  --c-teava:         #C0301F;   /* RAUTHERM S, roșu RAL 3000 — puțin luminat ca să se vadă pe negru */
  --c-banda:         #D8E2EC;   /* banda perimetrală */
  --c-sapa-turnata:  #9EA3AA;   /* șapa proaspătă, udă */
  --c-retur:         #3D8BFF;   /* pe desene: returul, în albastru — convenția planurilor */
  --c-zid:           #5A6273;   /* pereții, pe planul de șantier */
  --c-geam:          #8FC3FF;   /* ferestrele, pe plan */
  --c-inox:          #C9CED6;   /* distribuitorul din inox */

  /* --- Scara termică: de la albastru la galben la portocaliu-roșu -----------------
     Citită de js/termo.js (--termo-N culoarea, --termo-t-N temperatura în °C).
     Rece = culorile reci din logo; cald = galbenul din logo; fierbinte = roșu, apoi
     alb-cald pentru pielea tălpilor (33 °C), ca pe o cameră termică. */
  --termo-0: #070B2E;  --termo-t-0: 13;
  --termo-1: #1C3F85;  --termo-t-1: 16;
  --termo-2: #1F4FD0;  --termo-t-2: 18.5;
  --termo-3: #40A5C0;  --termo-t-3: 21;
  --termo-4: #9ACD8C;  --termo-t-4: 22.6;
  --termo-5: #FECE05;  --termo-t-5: 24;
  --termo-6: #F7931E;  --termo-t-6: 27;
  --termo-7: #E2361F;  --termo-t-7: 30.5;
  --termo-8: #FFE4C2;  --termo-t-8: 34;
  /* aceeași scară, pentru CSS (legende, linia caldă de sub titluri) */
  --termo-gradient: linear-gradient(90deg, #070B2E 0%, #1C3F85 14%, #1F4FD0 26%, #40A5C0 38%,
                    #9ACD8C 46%, #FECE05 52%, #F7931E 67%, #E2361F 83%, #FFE4C2 100%);
  --termo-cald:     linear-gradient(90deg, #40A5C0 0%, #FECE05 30%, #F7931E 62%, #E2361F 100%);

  /* Perechi de contrast, măsurate (WCAG; unelte/contrast_perechi.py, 06.10):
     cerneala   pe sapa 15,4 · pe sapa-2 13,9 · pe alb 17,0 · pe galben 12,0 · pe șapa turnată 7,1
     cerneala-2 pe sapa  7,0 · pe sapa-2  6,3 · pe alb  7,7
     albastru   pe sapa  7,9 · pe sapa-2 7,1 · pe alb 8,7 — merge și ca text
     lumina     pe noapte 16,8 · pe noapte-2 15,3 · pe placă 15,6
     lumina-2   pe noapte  8,9 · pe noapte-2  8,1 · pe placă  8,3
     galben     pe noapte 12,8 — text pe noapte, da; pe deschis, NICIODATĂ (1,3)
     roșu termic #E2361F pe noapte 4,4 — doar text ≥ 24 px sau grafică */

  /* --- Tipografie: familii ---------------------------------------------------------
     Testul §13 (unelte/test_diacritice.py, 06.10; refs/test-fonturi-*.png): ș ț cu virgulă,
     ă â î, ° × ² ³ – ± · — OK la 48 și la 150 px pe toate trei. */
  --font-display: 'Funnel Display', 'Arial', system-ui, sans-serif;
  --font-body:    'Funnel Sans', system-ui, sans-serif;
  --font-mono:    'Azeret Mono', ui-monospace, 'Consolas', monospace;

  /* --- Tipografie: scară (§6) --------------------------------------------------------- */
  --step--2: 0.75rem;                                        /* 12 px: citirile mici ale camerei */
  --step--1: 0.8125rem;                                      /* 13 px: etichete, majuscule */
  --step-0:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19 px: corp */
  --step-1:  clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  --step-2:  clamp(1.4375rem, 1.2rem + 1.05vw, 2rem);
  --step-3:  clamp(1.75rem, 1.35rem + 1.9vw, 2.875rem);
  --step-4:  clamp(2.125rem, 1.4rem + 3.3vw, 4.25rem);
  /* Trepte editoriale — câte o dată pe ecran */
  --step-6:  clamp(2.75rem, 1.2rem + 7vw, 7.75rem);
  --step-7:  clamp(3.25rem, 0.6rem + 11.5vw, 10.5rem);

  --lh-corp: 1.62;
  --lh-titlu: 0.98;
  --track-eticheta: 0.12em;
  --track-titlu: -0.025em;

  /* --- Spacing ------------------------------------------------------------------------ */
  --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: 4.5rem;  --s-9: 7rem;  --s-10: 10rem;
  --margine: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  --latime: 84rem;

  /* --- Radius: șapa e dreaptă; doar butoanele sunt rotunjite ------------------------- */
  --r-mic: 3px;
  --r-mediu: 10px;
  --r-buton: 999px;

  /* --- Umbre: căldura vine de jos — umbrele sunt reci și moi, lumina caldă urcă ------ */
  --umbra-culoare: 13 21 51;
  --umbra-1: 0 1px 2px rgb(var(--umbra-culoare) / .08), 0 10px 28px -14px rgb(var(--umbra-culoare) / .30);
  --umbra-2: 0 2px 4px rgb(var(--umbra-culoare) / .08), 0 28px 60px -28px rgb(var(--umbra-culoare) / .45);
  --stralucire: 0 22px 60px -18px rgb(247 147 30 / .55);   /* sub un obiect cald, pe noapte */

  /* --- Mișcare: căldura urcă încet și uniform (PLAN-DESIGN.md) ------------------------ */
  --durata: 1.1s;
  --durata-scurta: .45s;
  --ease-caldura: cubic-bezier(.16, 1, .3, 1);   /* expo.out */
  --ease-fin: cubic-bezier(.4, 0, .2, 1);
}