/* ============================================================
   ES — COLOR SYSTEM v1.2
   Allineato al brand book 2022
   Primitivi: sky + stone + amber brand + cream + gray
   Semantici: token --es-* mappati sui primitivi
   ============================================================ */

:root {

  /* ── SCALA SKY (brand blues) ──────────────────────────────
     Fonte: Tailwind v4 OKLCH
     #044D73 (brand dark) → sky-900
     #2A6F94 (brand medium) → sky-700
     --------------------------------------------------------- */
  --color-sky-50:  oklch(97.7% 0.013 236.620);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-sky-400: oklch(74.6% 0.160 232.661);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-sky-700: oklch(50.0% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.110 240.790);
  --color-sky-900: oklch(39.1% 0.090 240.876);
  --color-sky-950: oklch(29.3% 0.066 243.157);

  /* ── SCALA STONE (neutrali caldi) ─────────────────────────
     Usare per sfondi, testo, bordi — più caldi del grigio
     --------------------------------------------------------- */
  --color-stone-50:  oklch(98.5% 0.001 106.423);
  --color-stone-100: oklch(97.0% 0.001 106.424);
  --color-stone-200: oklch(92.3% 0.003  48.717);
  --color-stone-300: oklch(86.9% 0.005  56.366);
  --color-stone-400: oklch(70.9% 0.010  56.259);
  --color-stone-500: oklch(55.3% 0.013  58.071);
  --color-stone-600: oklch(44.4% 0.011  73.639);
  --color-stone-700: oklch(37.4% 0.010  67.558);
  --color-stone-800: oklch(26.8% 0.007  34.298);
  --color-stone-900: oklch(21.6% 0.006  56.043);
  --color-stone-950: oklch(14.7% 0.004  49.250);

  /* ── AMBER BRAND (palette caldi dal brand book) ───────────
     Convertiti da RGB originale brand book 2022
     #EEAA66 main · #F6DBB7 light · #FFF4E0 cream
     --------------------------------------------------------- */
  --color-amber-main:  oklch(79.0% 0.117 65.3);   /* #EEAA66 — accent principale */
  --color-amber-light: oklch(90.2% 0.074 83.6);   /* #F6DBB7 — dorato chiaro     */
  --color-cream:       oklch(97.1% 0.029 82.2);   /* #FFF4E0 — sfondo caldo      */

  /* ── GRAY BRAND ───────────────────────────────────────────
     #575756 — grigio neutro dal brand book (K80)
     Usare per testo secondario e UI elementi neutri
     --------------------------------------------------------- */
  --color-gray:        oklch(44.0% 0.003 60.0);   /* #575756 — grigio brand      */


  /* ══════════════════════════════════════════════════════════
     SEMANTICI — usare questi nei blocchi GB e nel CSS custom
     ══════════════════════════════════════════════════════════ */

  /* Superfici e layout */
  --es-bg:             var(--color-stone-50);      /* sfondo globale default       */
  --es-bg-warm:        var(--color-cream);         /* sfondo sezioni calde         */
  --es-surface:        #ffffff;                    /* card, modali, form           */
  --es-border:         var(--color-stone-200);     /* bordi leggeri                */

  /* Testo */
  --es-text:           var(--color-stone-950);     /* corpo testo su sfondo chiaro */
  --es-text-muted:     var(--color-gray);          /* didascalie, meta, note       */

  /* Primario — blu brand */
  --es-primary:        var(--color-sky-900);       /* ≈ #044D73 — brand dark blue  */
  --es-primary-mid:    var(--color-sky-700);       /* ≈ #2A6F94 — brand medium blue*/
  --es-primary-hover:  var(--color-sky-800);       /* hover su elementi primari    */
  --es-primary-subtle: var(--color-sky-100);       /* sfondo sezioni sky-tinted    */

  /* Accent — amber brand */
  --es-accent:         var(--color-amber-main);    /* #EEAA66 — CTA, highlight     */
  --es-accent-light:   var(--color-amber-light);   /* #F6DBB7 — badge, tint sezioni*/
  --es-accent-subtle:  var(--color-cream);         /* #FFF4E0 — sfondo sezioni warm*/

  /* Struttura sito */
  --es-header:         var(--color-sky-950);       /* background header            */
  --es-footer:         var(--color-sky-950);       /* background footer            */
  --es-cta-text:       #ffffff;                    /* testo su bottone primario    */
  --es-cta-accent-text: var(--color-stone-950);    /* testo su bottone amber       */
}