/*
 * Design tokens.
 *
 * Valorile sunt extrase din tema veche, ca designul să rămână identic:
 *   --color-brown: #978667  (accentul brandului)
 *   --color-black: #333
 *   body: 18px Montserrat
 *   h2: 40px bold
 *
 * Convenție: componentele folosesc doar tokenii semantici. Paleta brută nu se
 * referențiază direct în CSS-ul de componentă, ca schimbarea temei să fie o
 * singură editare aici.
 */
/*
 * Layerul e declarat AICI, în interiorul fișierului, nu prin `@import … layer()`
 * în main.css: minificatorul de CSS din LiteSpeed rescrie @import-urile și
 * pierde funcția layer(), ceea ce ar anula ordinea de cascadă în producție.
 */
@layer tokens {
  :root {
    /* ---- paletă brută ---- */
    --brown-400: #b3a488;
    --brown-500: #978667;
    --brown-600: #7d6e52;

    --neutral-0: #ffffff;
    --neutral-50: #f7f7f7;
    --neutral-100: #ededed;
    --neutral-200: #e7e7e7;
    --neutral-400: #959595;
    --neutral-600: #4f4f4f;
    --neutral-800: #333333;
    --neutral-900: #1e1e1e;

    /* Albastrul deschis al supratitlurilor din slider. */
    --accent-sky: #9cc6ef;

    --danger-500: #d64545;

    /* ---- tokeni semantici ---- */
    --color-bg: var(--neutral-0);
    --color-bg-subtle: var(--neutral-50);
    --color-surface: var(--neutral-0);
    --color-border: var(--neutral-200);
    --color-text: var(--neutral-800);
    --color-text-muted: var(--neutral-600);
    --color-text-inverse: var(--neutral-0);
    --color-accent: var(--brown-500);
    --color-accent-hover: var(--brown-600);
    --color-focus: var(--brown-500);

    /* Fundalul header-ului pe paginile fără hero. */
    --color-header: var(--neutral-900);

    /* ---- tipografie ---- */
    --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /*
     * Scală fluidă: clamp() în loc de câte o valoare fixă per breakpoint.
     * Reperele sunt dimensiunile din tema veche la desktop — 18px corpul de
     * text, 40px h2, 50px titlul din slider.
     */
    --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); /* 14 → 15 */
    --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /*  16 → 18 */
    --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /*  18 → 20 */
    --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /*  22 → 28 */
    --step-3: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem); /*  26 → 40 */
    --step-4: clamp(1.875rem, 1.35rem + 2.4vw, 3.125rem); /*  30 → 50 */

    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --tracking-tight: 0;

    /* ---- spațiere (scală de 4px) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --section-y: clamp(2.5rem, 1.5rem + 5vw, 6rem);

    /* ---- layout ---- */
    /*
     * Valori măsurate pe tema veche, nu alese: `.container` are max-width
     * 1440px și padding 0 15px. Orice altă lățime deplasează fiecare bloc de
     * pe fiecare pagină față de originalul care trebuie transcris.
     */
    --wrap-max: 1440px;
    --wrap-gutter: 15px;

    --header-h: 5.5rem;

    /* ---- formă ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 999px;

    --shadow-sm: 0 0 10px rgb(0 0 0 / 0.12);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.15);

    /* ---- mișcare ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;

    /* ---- z-index, într-un singur loc ---- */
    --z-header: 100;
    --z-nav: 200;
    --z-modal: 300;
  }

  /*
   * ---- redesign 2026 ----
   *
   * Tokenii designului nou, extrași din Figma (fișierul n-are variabile
   * definite, deci valorile vin din noduri). Prefixul `--rd-` îi ține separați
   * cât timp designul nou trăiește pe o singură pagină; când trec și celelalte
   * pagini, prefixul cade și ei devin tokenii temei.
   *
   * Accentul e dublu în design, pe două nuanțe apropiate: `#a68e63` pentru
   * evidențierile din titluri și cardul de contact, `#978667` pentru butoane —
   * acesta din urmă e chiar accentul actual al site-ului.
   */
  :root {
    --rd-accent: #a68e63;
    --rd-accent-button: var(--brown-500);

    --rd-surface: #f5f0e7;
    --rd-surface-soft: #f9f8f6;
    --rd-surface-pill: rgb(217 217 217 / 50%);

    --rd-text: #000;
    /* Coralul folosit pentru punctele „contra”, nu un roșu de eroare. */
    --rd-negative: #e8836a;
    --rd-text-muted: #6d6d6d;

    /* Vălul de peste fotografii, ca textul alb de deasupra să rămână lizibil. */
    --rd-scrim: rgb(0 0 0 / 30%);
    --rd-scrim-soft: rgb(0 0 0 / 20%);

    --rd-radius-lg: 40px;
    --rd-radius-md: 24px;
    --rd-radius-sm: 16px;

    /* Pasul grilei: 4 coloane de 336 cu 16px între ele, în 1392 de lățime. */
    --rd-wrap: 1392px;
    --rd-gutter: 24px;
    --rd-gap: 16px;

    --rd-pad-card: 40px;
    --rd-pad-tight: 16px;
  }
}