/* ==========================================================================
   TOKENS — design system Modreanu Tattoos
   Sursa unică de adevăr pentru culoare, tipografie, spațiere și motion.
   Nimic din acest fișier nu se suprascrie în altă parte.
   ========================================================================== */

:root {
  /* --- culoare: suprafețe --------------------------------------------- */
  --bg:        #0B0B0D;  /* fundal principal */
  --bg-alt:    #08080A;  /* secțiuni alternate, topbar, drawer */
  --bg-raised: #131316;  /* carduri, locuri de fotografie, blocul de reguli */
  --line:      #2B2B31;  /* borduri și separatoare */

  /* --- culoare: text --------------------------------------------------- */
  --text:   #D9D4C9;  /* corp de text        — 12.9:1 pe --bg */
  --bright: #F2ECE0;  /* titluri, accente de text */
  --muted:  #948E82;  /* text secundar       —  6.4:1 pe --bg */
  --faint:  #837E73;  /* etichete de placeholder, note — 4.9:1 pe --bg */

  /* --- culoare: accent -------------------------------------------------- */
  --acc:      #C9A227;  /* umplere buton, marcaje */
  --acc-hi:   #DDB63A;  /* hover pe accent */
  --acc-fg:   #0B0B0D;  /* text peste --acc   —  8.6:1 */
  --acc-text: #C9A227;  /* accent folosit ca text pe fundal închis */

  /* --- culoare: sistem -------------------------------------------------- */
  --focus: #8AB4FF;  /* deliberat în afara paletei de brand:
                        inelul de focus nu trebuie confundat cu hover-ul */

  /* --- tipografie -------------------------------------------------------- */
  /* Zilla Slab: serif egiptean, descendent al literei de afiș din secolul XIX,
     familia din care se trage lettering-ul de flash tradițional. Serifele
     dreptunghiulare rezistă pe fundal închis la orice corp, spre deosebire de
     hairline-urile unui Didone. */
  --font-display: 'Zilla Slab', 'Rockwell', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --fs-body:  16px;
  --fs-small: 15px;
  --fs-fine:  14px;
  --fs-micro: 13px;
  --lh-body:  1.7;
  --lh-head:  1.2;    /* slab-ul e mai dens decât un Didone, cere mai mult aer */

  /* Corpuri reduse față de Bodoni: la aceeași dimensiune, un slab bold
     ocupă vizual mult mai mult. */
  --fs-h1: clamp(29px, 4.6vw, 42px);
  --fs-h2: clamp(24px, 3.3vw, 32px);
  --fs-h3: 20px;

  /* Tăierile de display se strâng ușor la corpuri mari. */
  --ls-display: -.015em;

  /* --- spațiere ---------------------------------------------------------
     Scară semantică, nu numerică. Numele nu codifică niciun multiplu, deci
     nu poate ajunge să contrazică valoarea. Toate valorile sunt multipli
     de 4; tools/audit.py verifică asta la fiecare rulare.

     Regula de folosire: ritmul vertical — margin, padding, gap între
     blocuri — trece obligatoriu prin scara asta. Dimensiunile intrinseci
     ale unei componente (lățimea mărcii, mărimea unei pictograme, o
     coloană de grilă) rămân literale: nu sunt ritm.
     --------------------------------------------------------------------- */
  --sp-3xs:  4px;
  --sp-2xs:  8px;
  --sp-xs:  12px;
  --sp-sm:  16px;
  --sp-md:  20px;
  --sp-ml:  24px;
  --sp-l:   28px;
  --sp-lg:  32px;
  --sp-xl:  44px;
  --sp-2xl: 56px;
  --sp-3xl: 88px;

  /* --- layout ------------------------------------------------------------ */
  /* Breakpointuri: 360 / 768 / 1024 / 1440. Rămân literale în media queries
     — variabilele CSS nu funcționează acolo, e o limitare a specificației.
     Singurul 767px din base.css este max-width, pereche cu min-width 768px:
     deliberat, fără suprapunere. */

  --wrap: 1180px;
  --pad:  20px;          /* gutter lateral, crește pe breakpoint */
  --header-h: 72px;

  /* --- formă ------------------------------------------------------------- */
  --radius: 2px;         /* aproape zero: colțuri drepte = precizie */
  --tap:    48px;        /* înălțime minimă pentru orice țintă tactilă */

  /* --- motion ------------------------------------------------------------ */
  --dur-fast: .18s;
  --dur-base: .25s;
  --ease:     cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 768px) {
  :root { --pad: 32px; }
}

@media (min-width: 1024px) {
  :root { --pad: 40px; }
}