/* ==========================================================================
   Auto Moto Office — jetoanele de design (culori, tipografie, spațiu, mișcare)
   Singura sursă a valorilor. Componentele folosesc DOAR variabilele de aici;
   nicio culoare și niciun spațiu nu se scrie direct în CSS-ul de componentă.

   Fiecare număr e explicat în design/DESIGN.md („cine a scris numărul?").
   Rapoartele de contrast din comentarii sunt calculate, nu estimate.
   ========================================================================== */

/* --------------------------------------------------------------- fonturi -- */
/* Source Sans 3 și Source Serif 4, licență SIL OFL 1.1, găzduite local.
   Subset: Latin-1 + Latin Extended-A + U+0218–021B (Ș ș Ț ț cu VIRGULĂ, nu sedilă).
   Regenerare: python3 build/fa-fonturile.py                                   */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonturi/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonturi/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonturi/source-serif-4-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------- culori -- */
  /* Fundaluri — alb cald de hârtie, nu alb de ecran. */
  --amo-fundal: #fbf9f6;          /* fundalul paginii */
  --amo-suprafata: #ffffff;       /* carduri, câmpuri, tabele */
  --amo-fundal-cald: #f3efe8;     /* benzi alternante de secțiune */

  /* Bleumarin — text și suprafețe adânci. */
  --amo-bleumarin: #102a43;       /* text principal · 13,93:1 pe fundal (AAA) */
  --amo-bleumarin-adanc: #0a1c2e; /* hover pe butonul bleumarin */
  --amo-bleumarin-800: #1d3e5c;   /* pictograme, chenare accentuate · 10,54:1 */
  --amo-bleumarin-slab: #eaf0f6;  /* casete „sursă oficială", stări selectate */

  /* Chihlimbar — culoarea acțiunii. Nu poartă NICIODATĂ text pe fundal deschis. */
  --amo-chihlimbar: #e8a400;        /* umplerea butonului primar */
  --amo-chihlimbar-aprins: #f2b705; /* hover: se luminează, nu se închide */
  --amo-chihlimbar-apasat: #d99400; /* :active */
  --amo-chihlimbar-chenar: #c07e00; /* chenarul butonului · 3,21:1 pe fundal */
  --amo-chihlimbar-slab: #fdf1d6;   /* fundal de evidențiere (ex. „de reținut") */

  /* Text. */
  --amo-text: var(--amo-bleumarin);
  --amo-text-secundar: #5b564e;   /* gri CALD · 6,92:1 pe fundal, 6,35:1 pe cald */
  --amo-text-pe-inchis: #ffffff;  /* 14,64:1 pe bleumarin (AAA) */
  --amo-text-slab-pe-inchis: #c7d3e0; /* 9,64:1 pe bleumarin */

  /* Linii. Cele decorative nu au prag de contrast; chenarul de CÂMP are (3:1). */
  --amo-linie: #e6e0d6;           /* separatoare, chenare de card */
  --amo-linie-tare: #d6cec1;      /* chenar de card pe fundal cald */
  --amo-linie-camp: #8a8175;      /* chenar de input · 3,83:1 pe alb (WCAG 1.4.11) */

  /* Stări funcționale. */
  --amo-eroare: #b3261e;          /* 6,22:1 pe fundal */
  --amo-eroare-slab: #fdecea;
  --amo-reusita: #166534;         /* 6,78:1 pe fundal */
  --amo-reusita-slab: #e7f4ec;

  /* ---------------------------------------------------------- tipografie -- */
  --amo-font-text: "Source Sans 3", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --amo-font-titlu: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  /* Scară fluidă. Perechea min/max e citită astfel: 375 px → 1280 px. */
  --amo-t-mic: 0.875rem;                                        /* 14 px, fix */
  --amo-t-baza: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);       /* 16 → 17 px */
  --amo-t-mediu: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);    /* 18 → 20 px */
  --amo-t-h3: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);         /* 20 → 24 px */
  --amo-t-h2: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);            /* 24 → 32 px */
  --amo-t-h1: clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);         /* 30 → 44 px */
  --amo-t-afis: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);        /* 36 → 52 px */

  --amo-greutate-text: 400;
  --amo-greutate-tare: 600;

  --amo-lh-afis: 1.12;            /* titluri mari, serif */
  --amo-lh-titlu: 1.25;
  --amo-lh-text: 1.6;             /* corp de text lung */
  --amo-lh-compact: 1.45;         /* etichete, celule de tabel, nav */

  --amo-spatiere-titlu: -0.01em;  /* titlurile serif se string ușor */
  --amo-spatiere-eticheta: 0.01em;

  --amo-lat-rand: 66ch;           /* lungimea maximă a unui rând de text */

  /* Coloana de lectură a paginilor de document (L5, 19 sep 2026 — propunere pentru DESIGN.md §4).
     NU e un număr nou: e exact `--amo-lat-rand`, măsura de lizibilitate deja aleasă și motivată
     în §3 (66 de caractere). Diferența e CINE o poartă: până acum plafonul stătea pe `p`, iar
     listele, casetele „sursă oficială" și FAQ-ul n-aveau niciunul — în aceeași secțiune,
     paragraful ocupa jumătate de pagină și lista de sub el toată lățimea (măsurat la 1280:
     p = 96→624 px, ul = 96→1184 px). Acum plafonul stă pe COLOANĂ, iar tot ce curge în ea
     moștenește aceeași margine stângă și aceeași lățime maximă.
     ATENȚIE: `ch` se calculează pe fontul ELEMENTULUI. Pe `.doc__text` (font de corp) 66ch ≈ 528 px
     la 1280; `--amo-lat-max-ingust` (44rem = 704 px) NU produce aceeași măsură, deși DESIGN.md §3
     o afirmă — 704 px la 17,4 px corp ies ~88 de caractere, peste limita de 75 din §3. */
  --amo-lat-citire: var(--amo-lat-rand);

  /* Coloana laterală „Ai nevoie de ajutor?" de pe paginile de document (L5, 19 sep 2026).
     20rem = 320 px, ales aici din trei condiții simultane: (1) încape numărul de telefon pe UN
     rând în `.bloc-tel` (32 px, cifre tabulare: ≈211 px + 2×16 px padding = 243 px < 288 px utili);
     (2) la 960 px — pragul de la care apare coloana, deja folosit în foaia asta pentru antet,
     grila de contact și footer — coloana de lectură (528) + distanța minimă (48) + 320 fac exact
     896 px, adică fix conținutul disponibil la acea lățime, deci coloana apare din prima clipă în
     care încape, nu mai târziu; (3) în rem, nu în px, ca la text mărit 200% panoul să crească
     odată cu textul din el. */
  --amo-lat-lateral: 20rem;

  /* Înălțimea rândului de sus al antetului (DESIGN.md §5.1: 64 px pe telefon, 76 px de la 900 px
     în sus — pragul real din foaia de stil e 960, vezi nota de la `.antet__interior`).
     O SINGURĂ sursă pentru numărul ăsta (L5, 19 sep 2026): îl citesc și `.antet__interior`
     (`min-height`), și `scroll-margin-top`-ul țintelor de ancoră (ca o ancoră să nu ajungă sub
     antetul lipicios), și valoarea de rezervă a panoului de meniu mobil. În REM, nu în px:
     la text mărit (WCAG 1.4.4) antetul crește, iar rezerva de sub ancoră crește cu el. */
  --amo-h-antet: 4rem;            /* 64 px */

  /* ------------------------------------------------------------- spațiu -- */
  --amo-sp-1: 0.25rem;   /*  4 */
  --amo-sp-2: 0.5rem;    /*  8 */
  --amo-sp-3: 0.75rem;   /* 12 */
  --amo-sp-4: 1rem;      /* 16 */
  --amo-sp-5: 1.5rem;    /* 24 */
  --amo-sp-6: 2rem;      /* 32 */
  --amo-sp-7: 3rem;      /* 48 */
  --amo-sp-8: 4rem;      /* 64 */
  --amo-sp-9: 6rem;      /* 96 */

  --amo-sectiune: clamp(3rem, 2rem + 5vw, 5.5rem);   /* 48 → 88 px, ritmul vertical */
  --amo-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);   /* 17 → 32 px, marginea laterală */
  --amo-lat-max: 72rem;                              /* 1152 px, pagina largă */
  --amo-lat-max-ingust: 44rem;                       /* 704 px, pagini de citit */

  --amo-tinta-tactila: 2.75rem;   /* 44 px — minimul pentru orice element apăsabil */

  /* --------------------------------------------------------------- raze -- */
  --amo-raza-mic: 0.375rem;   /*  6 px — etichete, input-uri mici */
  --amo-raza: 0.625rem;       /* 10 px — butoane, câmpuri */
  --amo-raza-mare: 0.875rem;  /* 14 px — carduri, casete (13% din lățime, ca fila din logo) */
  --amo-raza-pastila: 999px;

  /* ------------------------------------------------------------- umbre --- */
  /* Umbre colorate în bleumarin, nu în gri neutru, și doar două. */
  --amo-umbra-mica: 0 1px 2px rgba(16, 42, 67, 0.06);
  --amo-umbra: 0 6px 20px -8px rgba(16, 42, 67, 0.18);

  /* ----------------------------------------------------------- mișcare --- */
  --amo-durata: 160ms;
  --amo-durata-lenta: 260ms;
  --amo-curba: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* -------------------------------------------------------------- focus -- */
  --amo-inel: 3px;
  --amo-inel-decalaj: 2px;
  --amo-inel-culoare: var(--amo-bleumarin);       /* 13,93:1 pe fundal deschis */
  --amo-inel-culoare-pe-inchis: var(--amo-chihlimbar); /* 6,79:1 pe bleumarin */
}

/* Antetul crește la 76 px de la 960 px în sus — același prag ca regula din stil.css care face
   navigația orizontală (`.antet__interior { min-height: var(--amo-h-antet) }` citește variabila
   asta, nu un al doilea număr). */
@media (min-width: 960px) {
  :root { --amo-h-antet: 4.75rem; }   /* 76 px */
}

/* Fără temă întunecată: identitatea e „hârtie curată", iar site-ul se citește în
   contexte luminoase. Pictograma de tab are totuși varianta ei — vezi site/favicon.svg. */

/* Mișcarea e un ornament; preferința utilizatorului o oprește complet. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --amo-durata: 0.01ms;
    --amo-durata-lenta: 0.01ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}