/* ==========================================================================
   tokens.css — Episcopia Tulcii
   Sursa: design/Design System Episcopia Tulcii v2 (standalone).html
   Bază rem: 16px. Valorile din sistemul de design sunt în px; aici sunt
   convertite la rem prin împărțire la 16. Valoarea în px rămâne în comentariu,
   ca să se poată verifica una câte una față de sistemul de design.
   Fiecare token de aici devine o Global Variable în Bricks. Vezi bricks-migration.md.
   ========================================================================== */

:root {
  /* --- Culori: preluate ca atare din sistemul de design ------------------ */
  --et-primary:        #223580;   /* albastru profund — text și titluri      */
  --et-secondary:      #AD8D66;   /* bronz                                   */
  --et-accent:         #C19D6F;   /* auriu                                   */
  --et-bg:             #F4F0EA;   /* ivoriu cald — fundal                    */
  --et-bg-alt:         #F9F7F3;   /* ivoriu deschis — fundal alternativ      */
  --et-liturgic:       #970029;   /* roșu liturgic — punctual                */

  /* --- Culori derivate --------------------------------------------------- */
  /* Bronzul și auriul din paletă NU trec WCAG AA pe niciun fundal al paletei
     (măsurat: 2,73 și 2,22 pe --et-bg). Sunt culori decorative. Pentru text și
     pentru legături se folosesc variantele întunecate de mai jos: aceeași nuanță
     și saturație, doar luminozitatea coborâtă până la pragul de 4,5:1.
     Nu sunt culori noi — sunt trepte tonale ale culorilor existente.
     Pragul este calculat pe fundalul cel mai închis pe care stau, adică pe
     --et-bg: casetele sunt mai deschise decât pagina. */
  --et-accent-text:    #806037;   /* auriu întunecat  — 4,53:1 pe casetă     */

  /* Neutrele sunt --et-primary la opacitate redusă peste fundal. Nu se
     introduce niciun gri nou în paletă. */
  --et-line:           rgba(34, 53, 128, .20);  /* linii, separatoare        */
  --et-line-strong:    rgba(34, 53, 128, .55);  /* contur de câmp — 3,02:1   */
  --et-muted:          rgba(34, 53, 128, .78);  /* text secundar — 5,46:1    */
  --et-wash:           rgba(34, 53, 128, .06);  /* fundal de rând, hover     */
  --et-caseta:         #FFFFFF;                 /* fundalul casetelor        */

  --et-focus:          var(--et-liturgic);      /* inel de focus — 7,88:1    */

  /* --- Tipografie -------------------------------------------------------- */
  --et-font-titlu:  'Cormorant SC', Georgia, 'Times New Roman', serif;
  --et-font-text:   'Literata', Georgia, 'Times New Roman', serif;
  --et-font-eticheta: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scara de mărimi — raport 1,25. Sistemul de design dă valorile pentru
     ecran mare; perechea min–max de mai jos coboară scara pe telefon.
     Scara fluidă nu există în sistemul de design: este adăugată aici.        */
  --et-text-display: clamp(2.25rem, 1.15rem + 4.4vw, 4.3125rem); /* 36 → 69px */
  --et-text-h1:      clamp(2rem,    1.35rem + 2.6vw, 3.4375rem); /* 32 → 55px */
  --et-text-h2:      clamp(1.75rem, 1.31rem + 1.75vw, 2.75rem);  /* 28 → 44px */
  --et-text-h3:      clamp(1.375rem,1.11rem + 1.06vw, 2.1875rem);/* 22 → 35px */
  --et-text-h4:      clamp(1.25rem, 1.14rem + 0.44vw, 1.75rem);  /* 20 → 28px */
  --et-text-lg:      clamp(1.1875rem, 1.12rem + 0.25vw, 1.375rem);/* 19 → 22px */
  --et-text-body:    1.125rem;   /* 18px */
  --et-text-sm:      0.9375rem;  /* 15px */
  --et-text-label:   0.6875rem;  /* 11px */

  --et-lh-display: 1.05;
  --et-lh-titlu:   1.1;
  --et-lh-h3:      1.15;
  --et-lh-h4:      1.2;
  --et-lh-lg:      1.4545;   /* 32/22 */
  --et-lh-body:    1.5556;   /* 28/18 */
  --et-lh-sm:      1.4667;   /* 22/15 */

  --et-ls-label: .14em;
  --et-ls-titlu: .01em;

  /* --- Spațiere — bază 4px ---------------------------------------------- */
  --et-space-3xs: 0.25rem;  /*   4px */
  --et-space-2xs: 0.5rem;   /*   8px */
  --et-space-xs:  0.75rem;  /*  12px */
  --et-space-s:   1rem;     /*  16px */
  --et-space-m:   1.5rem;   /*  24px */
  --et-space-l:   2rem;     /*  32px */
  --et-space-xl:  3rem;     /*  48px */
  --et-space-2xl: 4rem;     /*  64px */
  --et-space-3xl: 6rem;     /*  96px */
  --et-space-4xl: 8rem;     /* 128px */

  /* --- Structură — nu există în sistemul de design, adăugate aici -------- */
  --et-container:      75rem;    /* 1200px */
  --et-container-text: 42rem;    /*  672px — lățime de lectură              */
  --et-radius:         0.125rem; /*   2px — registru sobru, colțuri aproape drepte */
  --et-radius-buton:   6.25rem;  /* 100px — din Theme Style-ul sistemului    */
  --et-border:         1px;
  --et-rule:           2px;      /* linia de sub titlul de secțiune          */
  --et-ratio-foto:     3 / 2;    /* formatul obișnuit din arhivă             */
  --et-ratio-portret:  2 / 3;    /* pentru clădiri înalte                    */
  --et-stema-ratio:    0.782;    /* verificat pe două surse — design/README  */
}