/* ==========================================================================
   Cromatica Finisaje — design tokens
   Sursa: referinte/predare/docs/01-design-tokens.md + valorile reale citite
   in referinte/predare/design/*.dc.html. Unde documentul si fisierul de design
   nu coincid, fisierul castiga (vezi SPEC.md, sectiunea "Divergente").

   Nu se scriu valori hard-codate repetate in restul temei. Orice culoare,
   durata sau dimensiune care apare de doua ori intra aici.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1. CULORI — suprafete
     ------------------------------------------------------------------ */
  --c-surface: #FFFFFF;              /* fundal implicit pagina + carduri */
  --c-surface-warm: #FAF8F4;         /* sectiuni alternate, casete de context */
  --c-surface-sand: #F4EFEA;         /* fundal sub imagini, camp dezactivat */
  --c-surface-sand-2: #EFE9E3;       /* carduri de colectie, tile mega-menu */
  --c-surface-sand-3: #F2EDE8;       /* miniaturi in sertar, media card produs */
  --c-surface-bar: #F1EDE7;          /* bara de anunt din header */
  --c-surface-clay: #EDE4DA;         /* banda "Gama premium" */
  --c-surface-clay-2: #EFE6DC;       /* banda de branduri */
  --c-surface-clay-3: #EBDBCD;       /* banda de newsletter */
  --c-surface-lilac: #F0EAF0;        /* eticheta PALETAR, chip de context */
  --c-surface-off: #E7E2DD;          /* buton dezactivat (gri cald) */
  --c-surface-lightbox-thumb: #2B1F29;

  /* ------------------------------------------------------------------
     2. CULORI — text
     ------------------------------------------------------------------ */
  --c-ink: #231F20;                  /* titluri, text principal, preturi */
  --c-ink-70: #4A4448;               /* corp in casete, liste de detalii */
  --c-ink-55: #6E666A;               /* paragrafe explicative, descrieri */
  --c-ink-40: #9A9095;               /* meta, breadcrumb, etichete de camp */
  --c-ink-25: #C9C2C6;               /* eticheta dezactivata, buton comutator inactiv */
  --c-ink-mauve: #8A7B84;            /* subtitlul "FINISAJE" din logotip */

  /* ------------------------------------------------------------------
     3. CULORI — brand
     ------------------------------------------------------------------ */
  --c-plum: #5B2A55;                 /* primar: butoane, blocuri de accent, iconuri */
  --c-plum-deep: #4A2947;            /* footer, bloc de newsletter */
  --c-plum-press: #4A2947;           /* starea :active pe buton primar/secundar */
  --c-plum-darkest: #3B1B37;         /* banda de statistici */
  --c-plum-hero: #3E1F3B;            /* H1 de hero pe homepage */
  --c-crimson: #B01E4B;              /* EXCLUSIV hover pentru primar si linkuri */
  --c-amber: #E88352;                /* accent secundar: kickere, bare, badge-uri */
  --c-green: #3F8F5E;                /* stare pozitiva: gratuit, in stoc, succes */
  --c-brass: #C2AB72;                /* accent metalic discret — EXCLUSIV pe suprafete
                                        inchise (4,91:1 pe --c-plum). Interzis pe fundal
                                        deschis, pe text de corp, pe inelul de focus si
                                        pe orice informatie de stare. Maximum un element
                                        auriu per ecran. Reguli complete: SPEC.md §11.
                                        Propus in token-auriu-propunere.md, aprobat de PM
                                        2026-07-26 la prima utilizare (insigna de calitate). */

  /* ------------------------------------------------------------------
     4. CULORI — transparente recurente
     ------------------------------------------------------------------ */
  --c-line: rgba(0, 0, 0, .09);           /* celula de grila cu separator, card */
  --c-line-soft: rgba(0, 0, 0, .08);      /* rand de lista, bordura de card */
  --c-line-softer: rgba(0, 0, 0, .06);    /* card de continut, antet de sertar */
  --c-line-faint: rgba(0, 0, 0, .05);     /* rand in sertar, meniu mobil */
  --c-line-input: rgba(0, 0, 0, .16);     /* bordura de input si select */
  --c-line-btn: rgba(0, 0, 0, .18);       /* buton secundar neutru */
  --c-line-icon: rgba(0, 0, 0, .14);      /* buton de icon, paginare */
  --c-line-chip: rgba(0, 0, 0, .1);       /* chip de sugestie, buton de share */
  --c-line-control: rgba(0, 0, 0, .22);   /* bifa / radio in stare oprita */
  --c-line-swatch: rgba(0, 0, 0, .12);    /* patrat de nuanta pe card */
  --c-line-strong: rgba(0, 0, 0, .07);    /* separator de sectiune */

  --c-on-dark: #FFFFFF;
  --c-on-dark-70: rgba(255, 255, 255, .7);   /* icon social in footer */
  --c-on-dark-66: rgba(255, 255, 255, .66);  /* corp pe fundal inchis */
  --c-on-dark-62: rgba(255, 255, 255, .62);  /* linkuri de footer */
  --c-on-dark-60: rgba(255, 255, 255, .6);
  --c-on-dark-50: rgba(255, 255, 255, .5);   /* nota legala in footer */
  --c-on-dark-35: rgba(255, 255, 255, .35);  /* inelul spinnerului */
  --c-line-on-dark: rgba(255, 255, 255, .4);       /* buton ghost pe inchis */
  --c-line-on-dark-soft: rgba(255, 255, 255, .28); /* butoane in lightbox */
  --c-line-on-dark-faint: rgba(255, 255, 255, .12);/* separator in footer */
  --c-fill-on-dark: rgba(255, 255, 255, .14);      /* hover sageti lightbox */

  --c-veil-sertar: rgba(35, 31, 32, .35);   /* voal sub sertar */
  --c-veil-cautare: rgba(35, 31, 32, .45);  /* voal sub overlay de cautare */
  --c-veil-modal: rgba(45, 27, 46, .42);    /* voal sub modal */
  --c-veil-media: rgba(35, 31, 32, .38);    /* voal pe imagine in galerie */
  --c-veil-hero: rgba(45, 27, 46, .38);     /* voal pe hero */
  --c-lightbox: rgba(24, 16, 23, .94);      /* fundal lightbox */

  --c-plum-glow: rgba(91, 42, 85, .14);     /* halou de focus pe input */
  --c-plum-25: rgba(91, 42, 85, .25);       /* bordura sageti de carusel */
  --c-plum-16: rgba(91, 42, 85, .16);       /* separator vertical */
  --c-amber-rule: rgba(232, 131, 82, .55);  /* linie sub link cu sageata */
  --c-alb-92: rgba(255, 255, 255, .92);     /* buton favorite peste imagine */

  /* ------------------------------------------------------------------
     5. TIPOGRAFIE — familii
     Fonturile sunt auto-gazduite; vezi fonts.css + FONTS.md.
     ------------------------------------------------------------------ */
  --f-titlu: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-corp: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* greutati folosite efectiv (vezi FONTS.md) */
  --fw-titlu: 400;         /* Cormorant, implicit */
  --fw-titlu-logo: 500;    /* Cormorant, doar logotip + accente de brand */
  --fw-titlu-accent: 600;  /* Cormorant, un singur loc: logotipul "Calderra" */
  --fw-corp: 400;
  --fw-mediu: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ------------------------------------------------------------------
     6. TIPOGRAFIE — scara de dimensiuni
     ------------------------------------------------------------------ */
  /* titluri (Cormorant) */
  --fs-hero: 78px;         /* H1 hero homepage */
  --fs-h1: 46px;           /* H1 / H2 de sectiune pe paginile mari */
  --fs-h1-mic: 44px;       /* H1 pagina secundara */
  --fs-h2: 34px;           /* H2 in inventarul de componente, carduri mari */
  --fs-h2-compact: 32px;   /* H2 in coloana de text */
  --fs-h3: 29px;           /* H3, titlu de modal, titlu de card mare */
  --fs-h4: 26px;           /* titlu de sertar, card promo */
  --fs-card-titlu: 25px;   /* titlu de card de colectie */
  --fs-card-titlu-mic: 24px;
  --fs-h5: 22px;           /* subtitlu in contul meu */
  --fs-cifra: 42px;        /* cifra mare de statistica */
  --fs-cautare: 32px;      /* campul mare din overlay-ul de cautare */

  /* corp (Plus Jakarta Sans) */
  --fs-16: 16px;           /* intrebare de acordeon, intro hero */
  --fs-15-5: 15.5px;       /* pret pe card de carusel */
  --fs-15: 15px;           /* intro de sectiune */
  --fs-14-5: 14.5px;       /* paragraf lung, pret pe card de produs */
  --fs-14: 14px;           /* corp standard, navigatie */
  --fs-13-5: 13.5px;       /* text de card, input */
  --fs-13: 13px;           /* text de card mic, chip */
  --fs-12-5: 12.5px;       /* meta, link de footer */
  --fs-12: 12px;           /* bara de anunt, note */
  --fs-11-5: 11.5px;       /* eticheta de buton, breadcrumb */
  --fs-11: 11px;           /* kicker, eticheta de camp, badge */
  --fs-10-5: 10.5px;       /* micro-kicker, eticheta de fisa */
  --fs-10: 10px;           /* kicker in lightbox / asistent */
  --fs-9-5: 9.5px;         /* cifra din badge-ul de cos */
  --fs-9: 9px;             /* subtitlul logotipului */
  --fs-8-5: 8.5px;         /* eticheta "SUS" pe butonul flotant */

  /* ------------------------------------------------------------------
     7. TIPOGRAFIE — inaltimi de rand, spatiere intre litere, masura
     ------------------------------------------------------------------ */
  --lh-1: 1;
  --lh-titlu-strans: 1.03;
  --lh-titlu: 1.06;
  --lh-titlu-larg: 1.1;
  --lh-titlu-card: 1.14;
  --lh-strans: 1.3;
  --lh-nume: 1.4;
  --lh-card: 1.65;
  --lh-corp: 1.7;
  --lh-corp-mediu: 1.75;
  --lh-corp-larg: 1.8;

  --ls-kicker: .18em;      /* kicker de sectiune */
  --ls-eticheta: .16em;    /* eticheta de coloana, micro-kicker */
  --ls-fisa: .14em;        /* eticheta de card, link cu sageata */
  --ls-buton: .12em;       /* text de buton */
  --ls-badge: .1em;        /* badge, navigatie de categorii */
  --ls-camp: .06em;        /* eticheta de camp de formular */
  --ls-logo: .22em;        /* logotip CROMATICA */
  --ls-logo-sub: .44em;    /* subtitlu FINISAJE */
  --ls-stat: .08em;        /* eticheta sub cifra de statistica */

  --masura-scurta: 52ch;
  --masura: 70ch;
  --masura-larga: 78ch;
  --masura-faq: 780px;

  /* ------------------------------------------------------------------
     8. SPATIERE
     ------------------------------------------------------------------ */
  --latime-continut: 1216px;
  --gutter: max(24px, calc((100% - 1216px) / 2));

  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 18px;
  --sp-9: 20px;
  --sp-10: 22px;
  --sp-11: 24px;
  --sp-12: 26px;
  --sp-13: 28px;
  --sp-14: 32px;
  --sp-15: 36px;
  --sp-16: 40px;
  --sp-17: 44px;
  --sp-18: 48px;
  --sp-19: 56px;
  --sp-20: 64px;
  --sp-21: 88px;

  /* padding vertical de sectiune — valorile reale din fisiere */
  --sp-sectiune: 88px;         /* sectiune mare de pagina */
  --sp-sectiune-mediu: 56px;   /* sectiune de inventar / blocuri secundare */
  --sp-sectiune-mic: 44px;     /* banda USP, newsletter */
  --sp-sectiune-banda: 26px;   /* banda de branduri, bara de share */
  --sp-sectiune-jos: 72px;     /* ultima sectiune inainte de footer */

  --gap-grila: 16px;           /* grile de carduri */
  --gap-grila-larg: 20px;
  --gap-separator: 1px;        /* grile cu separator de 1px */
  --gap-chips: 10px;
  --gap-coloane: 24px;
  --gap-coloane-larg: 48px;
  --gap-coloane-mega: 64px;

  /* ------------------------------------------------------------------
     9. INALTIMI FIXE
     ------------------------------------------------------------------ */
  --h-buton-s: 38px;
  --h-buton-m: 46px;
  --h-buton-l: 52px;
  --h-buton-bloc: 54px;        /* CTA pe toata latimea in sertar */
  --h-camp: 46px;              /* formular dens (valoarea din design) */
  --h-camp-mare: 50px;         /* formular principal */
  --h-camp-mic: 44px;          /* camp inline (newsletter, asistent) */
  --h-icon-btn: 44px;          /* minim de atingere pentru butoane fara text */
  --h-pag: 38px;               /* buton de paginare */
  --h-flotant: 58px;           /* pastila de asistent, buton "Sus" */
  --h-header: 120px;
  --h-bara-anunt: 44px;
  --h-comutator: 26px;
  --w-comutator: 46px;
  --sz-control: 18px;          /* bifa / radio */
  --sz-control-fill: 8px;      /* umplerea patrata din bifa / radio */
  --w-sertar: 400px;
  --w-asistent: 376px;
  --w-modal: 460px;
  --w-modal-larg: 560px;

  /* ------------------------------------------------------------------
     10. BORDURI, COLTURI, UMBRE
     Fara colturi rotunjite. Exceptii documentate: portret de persoana (50%),
     badge de cos (50%), morfingul de pe cardul de produs (50% -> 0).
     ------------------------------------------------------------------ */
  --raza-0: 0;
  --raza-cerc: 50%;

  --bd-card: 1px solid var(--c-line-soft);
  --bd-celula: 1px solid var(--c-line);
  --bd-rand: 1px solid var(--c-line-soft);
  --bd-input: 1px solid var(--c-line-input);
  --bd-accent: 3px solid var(--c-amber);

  --umbra-card: 0 10px 30px rgba(0, 0, 0, .07);
  --umbra-card-mic: 0 6px 22px rgba(0, 0, 0, .07);
  --umbra-card-ridicat: 0 12px 32px rgba(0, 0, 0, .07);
  --umbra-mega: 0 24px 48px rgba(0, 0, 0, .07);
  --umbra-sertar: -20px 0 60px rgba(0, 0, 0, .14);
  --umbra-toast: 0 14px 40px rgba(0, 0, 0, .14);
  --umbra-panou: 0 24px 64px rgba(0, 0, 0, .18);
  --umbra-modal: 0 30px 80px rgba(0, 0, 0, .24);
  --umbra-banner: 0 -12px 40px rgba(0, 0, 0, .1);

  /* ------------------------------------------------------------------
     11. MISCARE
     ------------------------------------------------------------------ */
  --ease: cubic-bezier(.2, .7, .3, 1);            /* curba implicita */
  --ease-in-out: cubic-bezier(.66, 0, .34, 1);    /* tranzitii de carusel */
  --ease-out: cubic-bezier(.22, .61, .36, 1);     /* intrari de panou */
  --ease-back: cubic-bezier(.34, 1.42, .64, 1);   /* un singur efect cu depasire */

  --t-stare: 200ms;        /* culoare, fundal, bordura */
  --t-hover: 220ms;        /* hover pe link si buton */
  --t-umbra: 240ms;        /* umbra de card */
  --t-lent: 250ms;         /* icon de header, transform social */
  --t-icon: 300ms;         /* plus -> minus, opacitate de acordeon */
  --t-sertar-cta: 280ms;   /* butonul de adaugare care urca pe cardul de produs */
  --t-intrare: 320ms;      /* sertar, meniu mobil */
  --t-acordeon: 380ms;     /* max-height de acordeon */
  --t-morf: 420ms;         /* morfing de colt pe cardul de produs */
  --t-bara-faq: 480ms;     /* bara de hover pe randul de acordeon */
  --t-morf-card: 520ms;    /* morfing + latime pe cardul de colectie */
  --t-flex: 560ms;         /* acordeonul orizontal de categorii */
  --t-bara: 620ms;         /* bara de hover pe card si pe rand de lista */
  --t-zoom: 700ms;         /* zoom de imagine (carduri de continut) */
  --t-zoom-lent: 900ms;    /* zoom de imagine (media mare) */
  --t-panou: 820ms;        /* panoul din secventa "Gama premium" */
  --t-carusel: 950ms;      /* tranzitia de hero */
  --t-fade: 220ms;         /* fadeUp pentru sertar / modal */
  --t-toast: 240ms;        /* fadeUp pentru toast si panou de asistent */
  --t-spinner: 700ms;      /* rotatia spinnerului din buton */
  --t-shimmer: 1250ms;     /* pulsul scheletului de incarcare */
  --durata-toast: 4200ms;  /* cat sta un toast pe ecran (folosit din JS) */

  /* ------------------------------------------------------------------
     12. STRATURI (z-index)
     ------------------------------------------------------------------ */
  --z-header: 60;
  --z-cookie: 80;
  --z-sertar: 90;
  --z-cautare: 120;
  --z-flotant: 150;        /* pastila de asistent, buton "Sus" */
  --z-asistent: 155;
  --z-toast: 160;
  --z-modal: 170;          /* modal generic + panoul de preferinte cookie */
  --z-lightbox: 200;

  /* ------------------------------------------------------------------
     13. FOCUS PENTRU TASTATURA
     Un singur inel in tot sistemul (Cromatica Componente.dc.html, B19):
     contur portocaliu 2px, decalaj 2px, si pe fundal deschis, si pe inchis.
     Vezi SPEC.md D-06 — documentul 02 propunea plum pe fundal deschis.
     ------------------------------------------------------------------ */
  --focus-latime: 2px;
  --focus-decalaj: 2px;
  --focus-culoare: var(--c-amber);
  --focus-culoare-inchis: var(--c-amber);

  /* ------------------------------------------------------------------
     14. SISTEMUL DE HOVER PE CARD (variabila --atc)
     ------------------------------------------------------------------ */
  --atc: 0;                /* 0 in repaus, 1 la hover pe container */
  --atc-zoom-mare: .06;    /* zoom pe carduri mari */
  --atc-zoom-mic: .07;     /* zoom pe carduri mici si tile-uri de galerie */
  --atc-bara: 3px;         /* grosimea barei de progres */
  --atc-bara-culoare: var(--c-crimson); /* implicit; se cicleaza pe rand */

  /* ------------------------------------------------------------------
     15. PRAGURI (documentare — media queries nu pot citi variabile)
     1216px  latimea de continut
     1180px  header in mod compact (singurul prag codificat in JS)
     1024px  sidebar-urile coboara sub continut
      768px  breadcrumb trunchiat, grile la 2 coloane
      600px  grile la o coloana, butoane pe latime completa
      480px  titlurile Cormorant peste 40px coboara cu ~25%
     ------------------------------------------------------------------ */
}