/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  DULCIURI CU SUFLET — design-tokens.css                     ║
 * ║  Sistemul de Design: Variabile CSS Globale                   ║
 * ║                                                              ║
 * ║  CE SUNT DESIGN TOKENS?                                      ║
 * ║  Sunt "ingredientele" vizuale ale site-ului — culorile,      ║
 * ║  fonturile, spațiile, umbrele — definite o singură dată      ║
 * ║  și folosite oriunde. Dacă vrei să schimbi culoarea          ║
 * ║  principală, o schimbi DOAR AICI și se actualizează TOT.     ║
 * ║                                                              ║
 * ║  STRUCTURA PALETEI DE CULORI:                                ║
 * ║  Fiecare culoare are 9 variante (50-900):                    ║
 * ║  50-100 = cele mai deschise (fundal)                         ║
 * ║  300-500 = medii (elemente UI)                               ║
 * ║  700-900 = cele mai închise (text)                           ║
 * ║                                                              ║
 * ║  AROME TEMATICE (inspirate din cofetărie):                   ║
 * ║  🍮 Caramel  = culoarea principală (butoane, link-uri)       ║
 * ║  🤎 Ciocolată = text, fundal dark                            ║
 * ║  🍑 Piersică  = accente secundare, rose                      ║
 * ║  🍋 Vanilie   = fundal cald, cream                           ║
 * ║  🌿 Mentă     = succes, natural                              ║
 * ║  ✨ Auriu     = premium, decorativ                           ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════
   §1 PALETA DE BAZĂ
   Toate culorile sitului — nu se folosesc direct în UI,
   ci prin alias-urile semantice de mai jos (§2).
   ════════════════════════════════════════════════════ */
:root {

  /* 🍮 CARAMEL — culoarea principală a brandului */
  --clr-caramel-50:  #FEF8EE;  /* fundal hover subtil */
  --clr-caramel-100: #FDF0D5;  /* fundal badge deschis */
  --clr-caramel-200: #FAE0A8;  /* border deschis */
  --clr-caramel-300: #F5C86A;  /* hover elemente */
  --clr-caramel-400: #EEA83C;  /* accent mediu */
  --clr-caramel-500: #C8873A;  /* ★ PRINCIPAL — butoane, link-uri */
  --clr-caramel-600: #A86E28;  /* hover pe principal */
  --clr-caramel-700: #8A5518;  /* pressed state */
  --clr-caramel-800: #6B400E;  /* text pe fundal deschis */
  --clr-caramel-900: #4A2C08;  /* text cel mai întunecat */

  /* 🤎 CIOCOLATĂ — pentru text și fundal dark */
  --clr-choco-50:  #FAF6F2;
  --clr-choco-100: #F0E8DC;
  --clr-choco-200: #DEC8A8;
  --clr-choco-300: #C4A070;
  --clr-choco-400: #A87848;
  --clr-choco-500: #8B5E30;
  --clr-choco-600: #6B4820;
  --clr-choco-700: #4A3018;  /* text mediu */
  --clr-choco-800: #321E0C;  /* text întunecat */
  --clr-choco-900: #2E1A0E;  /* text cel mai întunecat */

  /* 🍑 PIERSICĂ — accente rose, moale */
  --clr-peach-50:  #FEF4F0;
  --clr-peach-100: #FDE8DF;
  --clr-peach-200: #FAC8B5;
  --clr-peach-300: #F5A888;
  --clr-peach-400: #EC8860;
  --clr-peach-500: #D4856A;  /* ★ accent secundar */
  --clr-peach-600: #B06848;
  --clr-peach-700: #8C4C30;
  --clr-peach-800: #6A3820;
  --clr-peach-900: #4A2412;

  /* 🍋 VANILIE — fundal cald, cremă */
  --clr-vanilla-50:  #FFFDF8;  /* cel mai deschis — fundal card */
  --clr-vanilla-100: #FDF6EC;  /* ★ fundal pagină principal */
  --clr-vanilla-200: #F8EDDA;  /* fundal secțiuni alternate */
  --clr-vanilla-300: #F0DEC0;  /* borduri delicate */
  --clr-vanilla-400: #E8CDA0;  /* elemente decorative */
  --clr-vanilla-500: #D4B478;  /* accent warm */

  /* 🌿 MENTĂ / SALVIE — succes, natural, ingrediente */
  --clr-sage-50:  #F2F7EE;
  --clr-sage-100: #E2EFDA;
  --clr-sage-200: #C0DDB0;
  --clr-sage-300: #96C880;
  --clr-sage-400: #6EAA58;
  --clr-sage-500: #5A8A48;  /* ★ culoare succes */
  --clr-sage-600: #486C38;
  --clr-sage-700: #3A5428;  /* text pe fundal sage */
  --clr-sage-800: #283A1C;
  --clr-sage-900: #1A2810;

  /* ✨ AURIU — premium, decorativ */
  --clr-gold-50:  #FEFBE8;
  --clr-gold-100: #FDF6C0;
  --clr-gold-200: #FBEB80;
  --clr-gold-300: #F5D848;  /* stele recenzii */
  --clr-gold-400: #E8C030;
  --clr-gold-500: #C8A84B;  /* ★ auriu principal */
  --clr-gold-600: #A88830;
  --clr-gold-700: #886820;
  --clr-gold-800: #685010;
  --clr-gold-900: #483808;

  /* ⬜ NEUTRU — gri funcțional */
  --clr-neutral-0:   #FFFFFF;
  --clr-neutral-50:  #FAFAF9;
  --clr-neutral-100: #F4F3F0;
  --clr-neutral-200: #E8E6E0;
  --clr-neutral-300: #D0CEC8;
  --clr-neutral-400: #A8A5A0;
  --clr-neutral-500: #808078;
  --clr-neutral-600: #605E58;
  --clr-neutral-700: #484640;
  --clr-neutral-800: #302E28;
  --clr-neutral-900: #181810;

  /* 🔴 ERORI / PERICOL */
  --clr-error-100: #FDEAEA;
  --clr-error-500: #E84A4A;
  --clr-error-700: #B02020;


/* ════════════════════════════════════════════════════
   §2 ALIAS-URI SEMANTICE
   Acestea se folosesc în componentele UI.
   Nu hardcoda culori — folosește alias-urile!
   ════════════════════════════════════════════════════ */

  /* FUNDAL */
  --bg-page:         var(--clr-vanilla-100);   /* fundalul întregii pagini */
  --bg-card:         var(--clr-vanilla-50);    /* carduri, modal */
  --bg-section-alt:  var(--clr-vanilla-200);   /* secțiuni alternate */
  --bg-dark:         var(--clr-choco-900);     /* footer, secțiuni dark */
  --bg-dark-alt:     var(--clr-choco-800);     /* hover pe dark */
  --bg-overlay:      rgba(46, 26, 14, 0.72);   /* overlay modal/lightbox */

  /* TEXT */
  --txt-primary:     var(--clr-choco-900);     /* text principal */
  --txt-secondary:   var(--clr-choco-700);     /* subtitluri, etichete */
  --txt-muted:       var(--clr-choco-500);     /* text secundar */
  --txt-light:       var(--clr-choco-300);     /* text dezactivat */
  --txt-on-dark:     var(--clr-vanilla-100);   /* text pe fundal dark */
  --txt-on-primary:  #FFFFFF;                  /* text pe butoane */
  --txt-brand:       var(--clr-caramel-500);   /* text culoare brand */
  --txt-accent:      var(--clr-peach-500);     /* accent text */

  /* BRAND / INTERACTIV */
  --brand:           var(--clr-caramel-500);   /* culoarea principală */
  --brand-hover:     var(--clr-caramel-600);   /* hover pe brand */
  --brand-active:    var(--clr-caramel-700);   /* pressed */
  --brand-subtle:    var(--clr-caramel-50);    /* fundal hover subtil */
  --brand-light:     var(--clr-caramel-100);   /* fundal badge */
  --accent:          var(--clr-peach-500);     /* accent secundar */
  --gold:            var(--clr-gold-500);      /* decorativ, stele */
  --success:         var(--clr-sage-500);      /* succes */
  --error:           var(--clr-error-500);     /* eroare */

  /* BORDURI */
  --border-subtle:   rgba(200, 135, 58, 0.12);  /* borduri delicate */
  --border-soft:     rgba(200, 135, 58, 0.22);  /* borduri normale */
  --border-medium:   rgba(200, 135, 58, 0.38);  /* borduri accentuate */
  --border-strong:   rgba(200, 135, 58, 0.60);  /* borduri vizibile */
  --border-on-dark:  rgba(253, 246, 236, 0.12); /* borduri pe fundal dark */


/* ════════════════════════════════════════════════════
   §3 TIPOGRAFIE
   Sistemul de fonturi al sitului.
   - Display: pentru titluri mari, elegant, serif
   - Script: pentru logo, accente caligrafice
   - Body: pentru text de citit, readable
   ════════════════════════════════════════════════════ */

  /* Familii */
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-script:  'Dancing Script', 'Brush Script MT', cursive;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Fira Code', 'Consolas', monospace; /* pentru cod în docs */

  /* Scară tipografică (Major Third — 1.25) */
  --fs-xs:   0.64rem;   /*  10px — etichete mici, legal */
  --fs-sm:   0.78rem;   /*  12px — meta, badge-uri */
  --fs-base: 1rem;      /*  16px — text curent */
  --fs-md:   1.125rem;  /*  18px — text lead */
  --fs-lg:   1.25rem;   /*  20px — card title */
  --fs-xl:   1.5rem;    /*  24px — section sub */
  --fs-2xl:  1.875rem;  /*  30px — section title mic */
  --fs-3xl:  2.25rem;   /*  36px — section title */
  --fs-4xl:  3rem;      /*  48px — hero sub */
  --fs-5xl:  3.75rem;   /*  60px — hero title */
  --fs-6xl:  5rem;      /*  80px — display */

  /* Greutăți */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Înălțime linie */
  --lh-tight:   1.1;   /* titluri mari */
  --lh-snug:    1.3;   /* titluri mici */
  --lh-normal:  1.55;  /* text normal */
  --lh-relaxed: 1.75;  /* text de citit */
  --lh-loose:   2.0;   /* text spacios */

  /* Spațiere litere */
  --ls-tight:   -0.02em;  /* titluri mari */
  --ls-normal:   0;
  --ls-wide:     0.05em;  /* butoane */
  --ls-wider:    0.10em;  /* etichete */
  --ls-widest:   0.18em;  /* eyebrow text */


/* ════════════════════════════════════════════════════
   §4 SPAȚIERE
   Sistemul de spații folosit pentru margin și padding.
   Bazat pe 4px grid.
   ════════════════════════════════════════════════════ */

  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */


/* ════════════════════════════════════════════════════
   §5 LAYOUT
   Dimensiuni fixe pentru elemente structurale.
   ════════════════════════════════════════════════════ */

  --container-max:    1320px;  /* lățimea maximă a conținutului */
  --container-narrow: 880px;   /* pentru text lung, blog */
  --container-wide:   1480px;  /* pentru galerie, full-bleed */
  --nav-height:       78px;    /* înălțimea barei de navigare */
  --footer-min:       420px;   /* înălțimea minimă footer */


/* ════════════════════════════════════════════════════
   §6 FORME — BORDER RADIUS
   ════════════════════════════════════════════════════ */

  --r-sm:   6px;      /* input-uri, badge-uri mici */
  --r-md:   12px;     /* carduri mici, butoane */
  --r-lg:   20px;     /* carduri mari */
  --r-xl:   32px;     /* secțiuni, modal */
  --r-2xl:  48px;     /* elemente decorative mari */
  --r-full: 9999px;   /* pill, avatare, butoane rotunde */


/* ════════════════════════════════════════════════════
   §7 UMBRE (SHADOWS)
   Sistem în 5 nivele — folosit pentru a crea adâncime.
   ════════════════════════════════════════════════════ */

  /* Umbre normale (pe fundal deschis) */
  --shadow-xs: 0 1px 3px rgba(92, 51, 23, 0.06);
  --shadow-sm: 0 2px 8px rgba(92, 51, 23, 0.08);
  --shadow-md: 0 6px 24px rgba(92, 51, 23, 0.10);
  --shadow-lg: 0 16px 48px rgba(92, 51, 23, 0.13);
  --shadow-xl: 0 32px 80px rgba(92, 51, 23, 0.16);

  /* Umbra brand (colorată în caramel) */
  --shadow-brand:   0 8px 28px rgba(200, 135, 58, 0.35);
  --shadow-brand-lg:0 16px 48px rgba(200, 135, 58, 0.25);

  /* Umbra glow (strălucire) */
  --shadow-glow:    0 0 32px rgba(200, 135, 58, 0.30);

  /* Focus ring (accesibilitate) */
  --shadow-focus:   0 0 0 3px rgba(200, 135, 58, 0.35);


/* ════════════════════════════════════════════════════
   §8 TRANZIȚII / ANIMAȚII
   Timpi și curbe de easing standardizate.
   ════════════════════════════════════════════════════ */

  /* Durate */
  --dur-instant: 80ms;    /* feedback imediat (click) */
  --dur-fast:    150ms;   /* hover simplu */
  --dur-base:    280ms;   /* tranziții UI normale */
  --dur-slow:    480ms;   /* animații mai elaborate */
  --dur-xslow:   750ms;   /* reveal la scroll */
  --dur-page:    900ms;   /* tranziții de pagină */

  /* Curbe de easing */
  --ease-linear:  linear;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* ieșire naturală */
  --ease-inout:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* efect elastic */
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);


/* ════════════════════════════════════════════════════
   §9 Z-INDEX (LAYERING)
   Straturile vizuale ale site-ului, de jos în sus.
   Folosește NUMAI aceste valori pentru z-index!
   ════════════════════════════════════════════════════ */

  --z-below:   -1;    /* fundaluri decorative */
  --z-base:     0;    /* conținut normal */
  --z-raised:   1;    /* hover cards */
  --z-dropdown: 10;   /* meniuri dropdown */
  --z-sticky:   50;   /* elemente sticky (header) */
  --z-overlay:  100;  /* overlay-uri de fundal */
  --z-modal:    200;  /* ferestre modale */
  --z-toast:    300;  /* notificări toast */
  --z-nav:      500;  /* bara de navigare */
  --z-top:      9999; /* progress bar, loader */


/* ════════════════════════════════════════════════════
   §10 TEXTURI / PATTERNURI
   Patternuri SVG inline pentru fundaluri decorative.
   ════════════════════════════════════════════════════ */

  /* Puncte delicate — folosit în secțiunea hero */
  --pattern-dots: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='1.2' fill='%23C8873A' fill-opacity='0.08'/%3E%3C/svg%3E");

  /* Cruce fină — pentru secțiuni alternative */
  --pattern-cross: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='20' y1='0' x2='20' y2='40' stroke='%23C8873A' stroke-opacity='0.06' stroke-width='0.5'/%3E%3Cline x1='0' y1='20' x2='40' y2='20' stroke='%23C8873A' stroke-opacity='0.06' stroke-width='0.5'/%3E%3C/svg%3E");

  /* Floral delicat — inspirat din decorațiuni de cofetărie */
  --pattern-floral: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C8873A' fill-opacity='0.05'%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3Ccircle cx='40' cy='15' r='2.5'/%3E%3Ccircle cx='40' cy='65' r='2.5'/%3E%3Ccircle cx='15' cy='40' r='2.5'/%3E%3Ccircle cx='65' cy='40' r='2.5'/%3E%3Ccircle cx='22' cy='22' r='1.5'/%3E%3Ccircle cx='58' cy='22' r='1.5'/%3E%3Ccircle cx='22' cy='58' r='1.5'/%3E%3Ccircle cx='58' cy='58' r='1.5'/%3E%3C/g%3E%3C/svg%3E");

  /* Diagonale — pentru secțiunile de prețuri */
  --pattern-diag: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20L20 0' stroke='%23C8873A' stroke-opacity='0.05' stroke-width='0.5'/%3E%3C/svg%3E");

}

/* ════════════════════════════════════════════════════
   §11 DARK MODE (opțional, pentru viitor)
   Dezactivat implicit. Activează cu <html data-theme="dark">
   ════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-page:       var(--clr-choco-900);
  --bg-card:       var(--clr-choco-800);
  --txt-primary:   var(--clr-vanilla-100);
  --txt-secondary: var(--clr-vanilla-300);
  --border-subtle: rgba(253, 246, 236, 0.10);
  --border-soft:   rgba(253, 246, 236, 0.18);
}