/* ==========================================================================
   Templates Studio — Design Tokens
   Fiecare template suprascrie doar variabilele din :root prin theme.css.
   Nu edita acest fisier in template-uri; foloseste theme.css.
   ========================================================================== */

:root {
  /* ---- Brand (suprascris de theme.css) ---- */
  --brand-h: 24;              /* hue    0-360 */
  --brand-s: 62%;             /* satur. */
  --brand-l: 46%;             /* lumin. */

  --brand:        hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-hover:  hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 7%));
  --brand-soft:   hsl(var(--brand-h) var(--brand-s) 96%);
  --brand-border: hsl(var(--brand-h) var(--brand-s) 86%);
  --brand-ink:    #ffffff;    /* text peste --brand */

  /* ---- Neutre ----
     Griurile nu sunt gri pur: au o urma de culoare care da temperatura
     intregului site. Doua numere o controleaza.

     --n-h  nuanta griurilor:  32 = cald (beige) · 220 = rece (albastrui)
     --n-s  cat de vizibila e: 0% = gri pur · 8% = discret · 16% = evident

     Multiplicatorii pastreaza curba naturala: tenta se vede mai mult
     in capete si mai putin la mijloc, ca la hartia si cerneala reale. */
  --n-h: 32;
  --n-s: 9%;

  --n-0:   #ffffff;
  --n-25:  hsl(var(--n-h) calc(var(--n-s) * 1.6) 98.6%);
  --n-50:  hsl(var(--n-h) calc(var(--n-s) * 1.6) 96.3%);
  --n-100: hsl(var(--n-h) calc(var(--n-s) * 1.5) 92.7%);
  --n-200: hsl(var(--n-h) calc(var(--n-s) * 1.3) 87.1%);
  --n-300: hsl(var(--n-h) calc(var(--n-s) * 1.15) 77.3%);
  --n-400: hsl(var(--n-h) calc(var(--n-s) * 0.9) 60.0%);
  --n-500: hsl(var(--n-h) calc(var(--n-s) * 0.9) 43.5%);
  --n-600: hsl(var(--n-h) var(--n-s) 32.4%);
  --n-700: hsl(var(--n-h) var(--n-s) 23.7%);
  --n-800: hsl(var(--n-h) var(--n-s) 15.5%);
  --n-900: hsl(var(--n-h) calc(var(--n-s) * 1.15) 9.2%);
  --n-950: hsl(var(--n-h) calc(var(--n-s) * 1.25) 5.3%);

  /* ---- Semantice ---- */
  --bg:           var(--n-0);
  --bg-subtle:    var(--n-50);
  --bg-muted:     var(--n-100);
  --bg-inverse:   var(--n-900);
  --surface:      var(--n-0);
  --surface-2:    var(--n-50);

  --text:         var(--n-900);
  --text-muted:   var(--n-600);
  --text-subtle:  var(--n-500);
  --text-inverse: var(--n-0);

  --border:       var(--n-200);
  --border-strong:var(--n-300);

  /* Fundal plin pentru starile selectate (pill, marime, pagina curenta).
     Se inverseaza in dark mode ca selectia sa ramana vizibila. */
  --solid:      var(--n-900);
  --solid-ink:  var(--n-0);

  --success: #2f7d4f;  --success-soft: #e7f3ec;
  --warning: #9a6400;  --warning-soft: #fdf3e0;
  --danger:  #b3261e;  --danger-soft:  #fdecea;
  --info:    #2563a8;  --info-soft:    #e8f1fb;

  /* ---- Tipografie ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-xs:   0.75rem;    --lh-xs:   1.4;
  --fs-sm:   0.875rem;   --lh-sm:   1.5;
  --fs-base: 1rem;       --lh-base: 1.65;
  --fs-lg:   1.125rem;   --lh-lg:   1.6;
  --fs-xl:   1.375rem;   --lh-xl:   1.4;
  --fs-2xl:  clamp(1.6rem,  1.2rem + 1.6vw, 2.1rem);
  --fs-3xl:  clamp(2rem,    1.4rem + 2.6vw, 2.9rem);
  --fs-4xl:  clamp(2.5rem,  1.6rem + 4vw,   4rem);
  --fs-5xl:  clamp(3rem,    1.8rem + 5.6vw, 5.2rem);

  --tracking-tight: -0.022em;
  --tracking-wide:  0.08em;

  /* ---- Spatiere (scala 4px) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;    --s-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);

  /* ---- Forma ---- */
  --r-sm: 4px;   --r-md: 8px;   --r-lg: 14px;   --r-xl: 22px;   --r-full: 999px;

  --shadow-xs: 0 1px 2px hsl(30 10% 12% / .05);
  --shadow-sm: 0 1px 3px hsl(30 10% 12% / .07), 0 1px 2px hsl(30 10% 12% / .04);
  --shadow-md: 0 4px 14px hsl(30 10% 12% / .08), 0 2px 4px hsl(30 10% 12% / .04);
  --shadow-lg: 0 14px 40px hsl(30 10% 12% / .12), 0 4px 10px hsl(30 10% 12% / .05);
  --shadow-xl: 0 28px 70px hsl(30 10% 12% / .16);

  /* ---- Miscare ---- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast:   140ms var(--ease);
  --t-base:   240ms var(--ease);
  --d-slow:   480ms;   /* doar durata, pentru transition-delay */
  --t-slow:   var(--d-slow) var(--ease-out);

  --z-sticky: 100;  --z-drawer: 200;  --z-modal: 300;  --z-toast: 400;
}

/* ---- Dark mode: automat dupa sistem, dar [data-theme] castiga ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-soft:   hsl(var(--brand-h) 30% 16%);
    --brand-border: hsl(var(--brand-h) 28% 28%);
    --brand:        hsl(var(--brand-h) calc(var(--brand-s) - 8%) calc(var(--brand-l) + 12%));
    --brand-hover:  hsl(var(--brand-h) calc(var(--brand-s) - 8%) calc(var(--brand-l) + 20%));
    --brand-ink:    var(--n-950);

    --bg:           var(--n-950);
    --bg-subtle:    var(--n-900);
    --bg-muted:     var(--n-800);
    --bg-inverse:   var(--n-50);
    --surface:      hsl(var(--n-h) calc(var(--n-s) * 1.4) 7.6%);
    --surface-2:    hsl(var(--n-h) calc(var(--n-s) * 1.3) 10.4%);

    --text:         var(--n-50);
    --text-muted:   var(--n-300);
    --text-subtle:  var(--n-400);
    --text-inverse: var(--n-950);

    --border:       hsl(var(--n-h) calc(var(--n-s) * 1.3) 17.5%);
    --border-strong:hsl(var(--n-h) calc(var(--n-s) * 1.2) 24.5%);

    --solid:      var(--n-50);
    --solid-ink:  var(--n-950);

    --success-soft: #16281d;  --warning-soft: #2a2010;
    --danger-soft:  #2c1513;  --info-soft:    #121f2e;

    --shadow-sm: 0 1px 3px hsl(0 0% 0% / .5);
    --shadow-md: 0 4px 14px hsl(0 0% 0% / .55);
    --shadow-lg: 0 14px 40px hsl(0 0% 0% / .6);
    --shadow-xl: 0 28px 70px hsl(0 0% 0% / .7);
  }
}

:root[data-theme="dark"] {
  --brand-soft:   hsl(var(--brand-h) 30% 16%);
  --brand-border: hsl(var(--brand-h) 28% 28%);
  --brand:        hsl(var(--brand-h) calc(var(--brand-s) - 8%) calc(var(--brand-l) + 12%));
  --brand-hover:  hsl(var(--brand-h) calc(var(--brand-s) - 8%) calc(var(--brand-l) + 20%));
  --brand-ink:    var(--n-950);

  --bg:           var(--n-950);
  --bg-subtle:    var(--n-900);
  --bg-muted:     var(--n-800);
  --bg-inverse:   var(--n-50);
  --surface:      hsl(var(--n-h) calc(var(--n-s) * 1.4) 7.6%);
  --surface-2:    hsl(var(--n-h) calc(var(--n-s) * 1.3) 10.4%);

  --text:         var(--n-50);
  --text-muted:   var(--n-300);
  --text-subtle:  var(--n-400);
  --text-inverse: var(--n-950);

  --border:       hsl(var(--n-h) calc(var(--n-s) * 1.3) 17.5%);
  --border-strong:hsl(var(--n-h) calc(var(--n-s) * 1.2) 24.5%);

  --solid:      var(--n-50);
  --solid-ink:  var(--n-950);

  --success-soft: #16281d;  --warning-soft: #2a2010;
  --danger-soft:  #2c1513;  --info-soft:    #121f2e;

  --shadow-sm: 0 1px 3px hsl(0 0% 0% / .5);
  --shadow-md: 0 4px 14px hsl(0 0% 0% / .55);
  --shadow-lg: 0 14px 40px hsl(0 0% 0% / .6);
  --shadow-xl: 0 28px 70px hsl(0 0% 0% / .7);
}