/* =========================================================
   CAMERE.MD — Design tokens
   The single source of truth for colour, type, space, motion.
   Nothing below this file may hardcode a colour or a duration.
   ========================================================= */

:root{
  color-scheme:light;

  /* =====================================================
     CULOARE — tokens semantici, doua seturi de valori.
     Componentele nu stiu ce tema e activa. Ele cer "suprafata" si
     "text"; ce inseamna asta se decide aici, o singura data.
     Trei stari, in ordinea in care se suprascriu:
       1. :root                      -> tema deschisa (implicit)
       2. @media prefers-color-scheme -> preferinta sistemului
       3. [data-theme]               -> alegerea explicita a omului
     ===================================================== */

  --surface:#faf9f5;         /* fundalul paginii - crem cald, nu alb clinic */
  --surface-raised:#ffffff;  /* card, bara fixa, camp de formular */
  --surface-sunken:#f1efe9;  /* adancitura: celule, zone de cod */
  --border:#e4e0d5;
  --border-soft:#efece3;
  --border-strong:#d3cec0;
  --text:#171a20;            /* 16.5 pe surface */
  --text-muted:#5b6270;      /* 5.82 pe surface */
  --text-faint:#666b74;      /* trece AA pe toate cele trei suprafete deschise:
                                5.36 pe alb, 5.08 pe crem, 4.66 pe adancitura.
                                #6b7079 cadea la 4.33 pe adancitura. */
  --on-accent:#ffffff;       /* text peste umplutura de accent */
  --glass:rgba(255,255,255,.72);  /* bara de navigatie, cu backdrop-filter */

  /* Stingerea de pe marginile fotografiei din hero: aceeasi culoare ca
     fundalul paginii, la jumatate de opacitate. Nu e un gradient de privit,
     ci lipsa unei cusaturi intre fotografie si pagina - de aceea valoarea
     ei se schimba odata cu tema, ca si fotografia de dedesubt. */
  --hero-fade:rgba(250,249,245,.55);
  --chip-bg:rgba(255,255,255,.88);     /* pastilele de peste fotografie */

  /* ---- ACCENT ----
     Portocaliul mostenit #ea6b08 are 3.02 pe crem. Ca forma - umplutura,
     bordura, iconita mare - e in regula. Ca text mic pe fundal deschis cade
     sub AA, deci --accent-text primeste alta valoare in fiecare tema. */
  --accent:#ea6b08;          /* forma: umpluturi, borduri, iconite */
  --accent-text:#a84a05;     /* text pe deschis - 5.47 */
  /* Umplutura de accent NU se schimba intre teme: ce se masoara aici e albul
     pe portocaliu, iar raportul ala nu depinde de fundalul paginii.
     Pe #ea6b08 albul da 3.18, sub AA - de aceea umplutura e mai inchisa. */
  --accent-strong:#b85105;   /* alb pe ea: 4.98 */
  --accent-press:#9c4405;    /* apasat/hover: se inchide, nu se deschide - alb 6.48 */
  --accent-deep:#c85a06;
  --accent-wash:rgba(234,107,8,.10);
  --accent-line:rgba(234,107,8,.32);

  /* ---- STARI ---- */
  /* Starile. Verdele era #1a7f4f: trecea pe crem si pe alb, dar cadea la
     4.36 pe adancitura. #167a4b trece pe toate trei (5.09 / 5.36 / 4.66). */
  /* Text pe suprafete care sunt inchise in AMBELE teme: fotografiile cu
     voal din portofoliu, cardul principal de servicii. Fundalul lor nu se
     schimba cu tema, deci nici textul de pe ele n-are voie. Cu tokenii
     obisnuiti, pe tema deschisa ieseau 3.09 si 3.29 — sub prag. */
  --on-dark:#eef1f4;
  --on-dark-muted:#8b97a6;
  --on-dark-accent:#ea6b08;

  --info:#0f5e62;
  --success:#167a4b;
  --warning:#8a5a12;
  --error:#a81f1f;

}

/* ---- TEMA INCHISA ----
   Aceleasi nume, alte valori. Nimic din CSS-ul componentelor nu se schimba. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --surface:#0a111c;
    --surface-raised:#0f1723;
    --surface-sunken:#06090f;
    --border:rgba(255,255,255,.10);
    --border-soft:rgba(255,255,255,.06);
    --border-strong:rgba(255,255,255,.20);
    --text:#eef1f4;
    --text-muted:#8b97a6;
    --text-faint:#78838f;
    --accent-text:#ea6b08;   /* 5.95 pe #0a111c - portocaliul plin e corect aici */
    --glass:rgba(10,17,28,.62);
    --sh-sm:none;
    --sh-md:none;
    --sh-lg:none;
    --sh-dark:none;
    --chip-bg:rgba(16,24,36,.82);
    --hero-fade:rgba(10,17,28,.62);
    /* Starile, pe fundal inchis. Fara ele ramaneau valorile temei deschise si
       dadeau 2.5-3.5 pe negru: mesajul de eroare al formularului era aproape
       ilizibil. Aceleasi valori ca in constructor, ca sa nu existe doua
       verzuri diferite in acelasi produs. */
    --info:#3fb9bd;
    --success:#3ecf8e;
    --warning:#e3a008;
    --error:#f16a6a;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --surface:#0a111c;
  --surface-raised:#0f1723;
  --surface-sunken:#06090f;
  --border:rgba(255,255,255,.10);
  --border-soft:rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.20);
  --text:#eef1f4;
  --text-muted:#8b97a6;
  --text-faint:#78838f;
  --accent-text:#ea6b08;
  --glass:rgba(10,17,28,.62);
  --sh-sm:none;
  --sh-md:none;
  --sh-lg:none;
  --sh-dark:none;
  --chip-bg:rgba(16,24,36,.82);
  --hero-fade:rgba(10,17,28,.62);
  /* Starile, pe fundal inchis. Fara ele ramaneau valorile temei deschise si
     dadeau 2.5-3.5 pe negru: mesajul de eroare al formularului era aproape
     ilizibil. Aceleasi valori ca in constructor, ca sa nu existe doua
     verzuri diferite in acelasi produs. */
  --info:#3fb9bd;
  --success:#3ecf8e;
  --warning:#e3a008;
  --error:#f16a6a;
}

:root{
  /* ---- TYPE ---- */
  --f-head:"Barlow Semi Condensed","Rubik",system-ui,sans-serif;
  --f-body:"Source Sans 3","Open Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Rampa tipografica: 11 trepte, fiecare cu un rol declarat. Nimic din
     afara ei nu are voie sa apara intr-o componenta. Titlurile si cifrele
     sunt fluide (360px -> 1920px); textul curge fix, ca sa nu-si schimbe
     dimensiunea sub ochii cititorului.
     min(vw,vh) la h1, ca un ecran de laptop scund sa nu primeasca un titlu
     mai inalt decat pliul in care trebuie sa incapa. */
  --fs-hero:clamp(2.6rem,min(6.4vw,10.4vh),6.5rem);  /* h1 */
  --fs-h2:clamp(2rem,4vw,3.6rem);                    /* titlu de sectiune */
  --fs-stat:clamp(1.75rem,2.6vw,2.4rem);             /* cifre mari */
  --fs-h3:clamp(1.35rem,2.2vw,2.1rem);               /* titlu mare de card */
  --fs-h4:clamp(1.1rem,1.5vw,1.45rem);               /* titlu mic */
  --fs-lead:clamp(1rem,1.15vw,1.15rem);              /* introducere */
  --fs-body:clamp(.95rem,1vw,1.0625rem);             /* text curent */
  --fs-small:.875rem;                                /* text secundar */
  --fs-label:.8125rem;                               /* eticheta */
  --fs-mono:.75rem;                                  /* eticheta tehnica */
  --fs-micro:.6875rem;                               /* cea mai mica, rar */

  /* Filigranul din hero nu e text de citit, e o forma. De aceea are voie sa
     stea in afara rampei. */
  --fs-watermark:clamp(5rem,17vw,17rem);

  /* ---- SPACE ----
     O singura scara, pe grila de 4px. Numele e valoarea, ca orice abatere sa
     se vada la prima citire: un padding:26px intr-o componenta e imediat
     vizibil ca nefiind din sistem.
     Exceptie declarata: 1-3px raman literale. Sunt fire de par si ajustari
     optice (compensarea unei borduri, alinierea unei iconite), nu spatiere. */
  --sp-4:4px;
  --sp-8:8px;
  --sp-12:12px;
  --sp-16:16px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-32:32px;
  --sp-36:36px;
  --sp-40:40px;
  --sp-44:44px;
  --sp-48:48px;
  --sp-64:64px;
  --sp-72:72px;
  --sp-76:76px;

  --sp-section:clamp(72px,9vw,148px);
  --sp-gutter:clamp(16px,4vw,64px);
  --maxw:1360px;
  --maxw-text:62ch;

  /* ---- RADII — restrained. Nothing is a pill except pills. ---- */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;

  /* ---- MOTION: durations ---- */
  --t-micro:180ms;
  --t-ui:260ms;
  --t-comp:480ms;
  --t-story:800ms;
  --t-sig:1400ms;

  /* ---- MOTION: easing ---- */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
  --e-scan:linear;

  /* ---- ELEVATION — static shadows; only opacity is ever animated ---- */
  /* Umbrele functioneaza doar pe fundal deschis. In tema inchisa se sting si
     elevatia o duce diferenta de luminozitate a suprafetei (--surface-raised)
     plus o bordura deschisa cu opacitate mica. Regula e aici, o data. */
  --sh-sm:0 1px 2px rgba(23,26,32,.06),0 2px 6px rgba(23,26,32,.05);
  --sh-md:0 10px 24px -12px rgba(23,26,32,.22);
  --sh-lg:0 28px 60px -28px rgba(23,26,32,.34);
  --sh-dark:0 30px 70px -30px rgba(0,0,0,.85);

  /* ---- STRATURI ----
     Scara e declarata aici o singura data si citita in ordinea in care
     elementele se acopera. Numerele mari lasa loc intre trepte, ca o inserare
     ulterioara sa nu ceara renumerotarea intregii pagini.
     Contextele locale (hero-ul, care e isolation:isolate) folosesc mai departe
     0-6 intre ele; nu concureaza cu scara globala. */
  --z-local:20;        /* decor peste continut, in aceeasi sectiune */
  --z-dock:170;        /* butonul flotant de contact */
  --z-nav:180;         /* pastila de navigatie */
  --z-drawer:190;      /* sertarul de pe mobil */
  --z-lightbox:220;    /* portofoliul deschis peste pagina */
  --z-skip:400;        /* linkul de sarit la continut, mereu deasupra */

  /* runtime values written by JS */
  /* Inaltimea barei, cu tot cu cei 16px de deasupra pastilei: 44px randul de
     meniu + 16px padding + 16px distanta. E doar valoarea de pornire —
     `nav.js` o masoara la rulare si o rescrie, ca sa nu ramana in urma cand
     se schimba bara. Era 64px, adica cu 12px mai putin decat bara reala, si
     exact atat intra titlul din hero sub ea. */
  --nav-h:76px;
  --hp:0;                   /* hero scroll progress 0..1 */
}

/* Hero progress is clamped for use in calc() chains */
@property --hp{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}