/* ============================================================================
   tokens.css — Karmin. Sursa unică de adevăr pentru culoare, tipografie, spațiu, umbre.
   (CLAUDE.md §3, §8, §12; excepțiile studioului în clients/studio/CLAUDE.md)

   Atelierul: hârtie gri, cerneală, o singură culoare — carminul. Costumele clienților
   (Garderoba) își aduc culorile lor; aici e doar costumul nostru.

   Culorile NU sunt din memorie:
   - carminul, carminul adânc și umbra lui: k-means pe coperta lui Hirata, Recipes for Composite
     Restorations (referința lui Niki de la primul proiect) — 45% / 42% / 5% din pixeli;
   - hârtia și cerneala: k-means pe planșa Margo Frank (referința de logo trimisă de Niki).
   Se re-măsoară pe fotografiile voastre când vin (hârtia, mai ales).
   ========================================================================= */

/* ---------- Fonturile (self-hosted, OFL, tăiate cu unelte/fonturi.py) ---------- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("assets/fonts/big-shoulders-display.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("assets/fonts/host-grotesk.woff2") format("woff2-variations");
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap;
}
/* Mr Dafoe: DOAR pentru logo și cuvinte fără ă/ș/ț (fontul nu le are). Logo-ul în sine e SVG. */
@font-face {
  font-family: "Mr Dafoe";
  src: url("assets/fonts/mr-dafoe.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* ---------- Paleta ---------- */
  --c-carmin:        #BC1923;   /* Hirata 45%. Câmpuri, logo, banda pensulei. Text: 4,96:1 pe hârtie → doar ≥ 24 px */
  --c-carmin-adanc:  #A9191E;   /* Hirata 42%. Butoane, text carmin mic: 5,75:1 pe hârtie, 5,09:1 pe hârtia adâncită */
  --c-umbra:         #61140F;   /* umbra farfuriei. Baza umbrelor colorate (§8) */
  --c-carmin-noapte: #E8574F;   /* carminul pe cerneală: 4,95:1 (carminul simplu dă 2,76 — pică) */

  --c-hartie:        #E3E3E3;   /* Margo Frank. Fundalul atelierului */
  --c-hartie-2:      #D7D6D5;   /* secțiune adâncită */
  --c-foaie:         #F3F3F2;   /* suprafață ridicată: foaia pe masă */
  --c-cerneala:      #191919;   /* text: 13,7:1 pe hârtie, 12,1:1 pe adâncită */
  --c-cerneala-2:    #4D4C4B;   /* text secundar: 6,68:1 pe hârtie, 5,90:1 pe adâncită */
  --c-cerneala-3:    #6A6867;   /* doar ≥ 24 px sau pe foaie (4,32:1 pe hârtie — PICĂ la text mic) */
  --c-linie:         #C4C2C1;   /* linii fine, borduri */
  --c-pe-cerneala-2: #B9B7B5;   /* text secundar pe cerneală: 8,7:1 */
  --c-pe-cerneala-3: #8C8A88;   /* cuvintele încă „stinse” din fraza care se aprinde: 5,0:1 pe cerneală */
  --c-alb-metru:     #FFFFFF;   /* metrul din dreapta, în mix-blend-mode: difference (se inversează pe orice fundal) */

  --c-pe-carmin:     #F3F3F2;   /* text pe carmin: 5,73:1; pe carmin adânc 6,65:1 */
  --c-pe-carmin-2:   #F2C9C4;   /* secundar pe carmin: 4,22:1 → doar ≥ 24 px; pe carmin adânc 4,90:1 */

  /* ---------- Tipografia ---------- */
  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-text:    "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Red Hat Mono", ui-monospace, Consolas, monospace;
  --f-pensula: "Mr Dafoe", "Brush Script MT", cursive;

  /* Scara de text: 17 px, raport 1,25 (cvartă mare). Big Shoulders e îngust → titlurile urcă o treaptă. */
  --step--1: 0.875rem;                                  /* 14 — etichete, majuscule rărite */
  --step-0:  1.0625rem;                                 /* 17 — text */
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);   /* 19–22 */
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);   /* 24–30 */
  --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);    /* 30–44 */
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4rem);         /* 38–64 */
  --step-5:  clamp(3rem, 2rem + 5vw, 6rem);             /* 48–96 */
  /* Treptele editoriale — câte o dată pe ecran (§6) */
  --step-6:  clamp(4rem, 2.4rem + 8vw, 9.5rem);         /* 64–152 */
  --step-7:  clamp(5rem, 2.5rem + 12.5vw, 15rem);       /* 80–240: deschiderea, „218" */

  --lh-display: 0.88;
  --lh-titlu:   1.0;
  --lh-text:    1.6;
  --ls-display: -0.005em;
  --ls-eticheta: 0.16em;

  /* ---------- Spațiu ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; --sp-10: 10rem;
  --gutter: clamp(16px, 4vw, 56px);
  --latime: 90rem;
  --latime-text: 62ch;

  /* ---------- Lumina și umbrele: o singură sursă, din stânga-sus (fereastra atelierului) ----------
     Umbrele cad spre dreapta-jos, colorate cu umbra carminului, nu negru la 20% (§8).
     De re-măsurat pe pozele voastre (direcția luminii din portrete). */
  --umbra-1: 1px 1px 1px rgb(97 20 15 / .06), 3px 6px 14px -6px rgb(97 20 15 / .16);
  --umbra-2: 1px 2px 2px rgb(97 20 15 / .06), 8px 18px 36px -14px rgb(97 20 15 / .24), 20px 50px 80px -40px rgb(97 20 15 / .22);
  --umbra-3: 2px 3px 3px rgb(25 25 25 / .10), 18px 40px 70px -20px rgb(25 25 25 / .38), 40px 90px 140px -60px rgb(97 20 15 / .30);

  /* ---------- Ramele desenate (laptop, telefon) — materiale, nu culori de brand ---------- */
  --c-ram-1: #2A2A2A; --c-ram-2: #0D0D0D; --c-ram-camera: #3A3A3A;
  --c-aluminiu-1: #D9D9D9; --c-aluminiu-2: #A7A7A7; --c-aluminiu-3: #8A8A8A;

  /* ---------- Raze ---------- */
  --r-mic: 3px;
  --r-ram: 18px;      /* rama laptopului */

  /* ---------- Mișcare (atelierul: precis și rapid — §21, „studio, nu cabinet") ---------- */
  --t-scurt: 0.35s;
  --t-mediu: 0.7s;
  --e-iesire: cubic-bezier(.2, .7, .2, 1);
  --e-precis: cubic-bezier(.65, 0, .35, 1);
}