/* ==========================================================================
   MERENDERO CESENATICO — Design Tokens
   Basati su brand identity attuale, modernizzati per il nuovo sito.
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --color-bg-white:       #FDFAF3;  /* off-white caldo — bg primario */
  --color-cream:          #F6ECD1;
  --color-cream-light:    #FCF8EF;
  --color-cream-dark:     #F0E4CC;
  --color-warm-black:     #1C1410;
  --color-warm-dark:      #2A2018;
  --color-terracotta:     #C94040;  /* acceso verso rosso logo #DB3C3C */
  --color-terracotta-light: #D44A48;
  --color-orange:         #EC8A38;  /* acceso verso arancio logo #E98834 */
  --color-gold:           #E2B830;  /* acceso verso giallo logo #FFEE2E */
  --color-gold-light:     #F0D04A;
  --color-green:          #428A26;
  --color-green-dark:     #377520;
  --color-white:          #fff;

  /* ── Logo Colors (riferimento, non usati direttamente) ── */
  --color-logo-red:       #DB3C3C;
  --color-logo-yellow:    #FFEE2E;
  --color-logo-orange:    #E98834;

  /* ── Neutrals ── */
  --color-neutral-100:    #F7F3ED;
  --color-neutral-200:    #E8E0D4;
  --color-neutral-300:    #D4C9B8;
  --color-neutral-400:    #A89882;
  --color-neutral-500:    #8C7E6F;
  --color-neutral-600:    #6B5E50;
  --color-neutral-700:    #4A3F34;
  --color-neutral-800:    #332B22;
  --color-neutral-900:    #1C1410;

  /* ── Semantic Colors ── */
  --color-bg:             var(--color-bg-white);
  --color-bg-alt:         var(--color-neutral-100);
  --color-bg-dark:        #8A4A2A;  /* corten — ruggine caldo, sfondi sezioni scure */
  --color-text:           var(--color-warm-black);
  --color-text-light:     var(--color-neutral-600);
  --color-text-inverse:   var(--color-cream);
  --color-primary:        var(--color-terracotta);
  --color-primary-hover:  var(--color-terracotta-light);
  --color-accent:         var(--color-orange);
  --color-highlight:      var(--color-gold);
  --color-border:         var(--color-neutral-200);

  /* ── Typography ── */
  --font-display:         'Impact', sans-serif;
  --font-body:            'DM Sans', sans-serif;
  --font-brand:           var(--font-display);
  --font-signature:       'Caveat', cursive;
  --weight-display:       400;     /* Impact ha un solo peso */
  --weight-body:          400;     /* DM Sans Regular — body text */
  --weight-body-medium:   700;     /* DM Sans Bold — titoli, btn, nav, tag, label */
  --tracking-display:     0;       /* Impact è già condensed, no negative */

  /* Scale: DM Sans body + Impact display */
  --text-xs:              0.8125rem;  /* 13px */
  --text-sm:              0.9375rem;  /* 15px */
  --text-base:            1rem;       /* 16px */
  --text-md:              1.125rem;   /* 18px */
  --text-lg:              1.25rem;    /* 20px */
  --text-xl:              1.5rem;     /* 24px */
  --text-2xl:             2.25rem;    /* 36px */
  --text-3xl:             2.75rem;    /* 44px */
  --text-4xl:             3.75rem;    /* 60px */
  --text-5xl:             5rem;       /* 80px */
  --text-hero:            6.5rem;     /* 104px */

  --leading-tight:        1.1;
  --leading-snug:         1.25;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  --tracking-tight:       0;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.1em;

  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* ── Spacing (8px grid) ── */
  --space-1:              0.25rem;    /* 4px */
  --space-2:              0.5rem;     /* 8px */
  --space-3:              0.75rem;    /* 12px */
  --space-4:              1rem;       /* 16px */
  --space-5:              1.5rem;     /* 24px */
  --space-6:              2rem;       /* 32px */
  --space-8:              3rem;       /* 48px */
  --space-10:             4rem;       /* 64px */
  --space-12:             5rem;       /* 80px */
  --space-16:             8rem;       /* 128px */
  --space-20:             10rem;      /* 160px */

  /* ── Nav height ── */
  --nav-height:           80px;
  --nav-height-mobile:    70px;

  /* ── Section spacing ── */
  --section-gap:          var(--space-16);
  --section-gap-mobile:   var(--space-10);
  --container-max:        1280px;
  --container-padding:    var(--space-5);

  /* ── Borders & Radius ── */
  --radius-sm:            0.375rem;   /* 6px */
  --radius-md:            0.75rem;    /* 12px */
  --radius-lg:            1rem;       /* 16px */
  --radius-xl:            1.5rem;     /* 24px */
  --radius-full:          9999px;
  --radius-btn:           0.625rem;   /* 10px — bottoni medi rettangolari */

  /* ── Shadows ── */
  --shadow-sm:            0 1px 3px rgba(28, 20, 16, 0.08);
  --shadow-md:            0 4px 12px rgba(28, 20, 16, 0.1);
  --shadow-lg:            0 8px 30px rgba(28, 20, 16, 0.12);
  --shadow-xl:            0 16px 50px rgba(28, 20, 16, 0.15);
  --shadow-glow:          0 0 40px rgba(200, 67, 43, 0.2);

  /* ── Transitions ── */
  --ease-out:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:        150ms;
  --duration-normal:      250ms;
  --duration-slow:        400ms;

  /* ── Z-Index Scale ── */
  --z-base:               0;
  --z-above:              10;
  --z-nav:                100;
  --z-sticky:             200;
  --z-overlay:            500;
  --z-modal:              1000;

  /* ── Breakpoints (for reference in JS) ── */
  --bp-sm:                640px;
  --bp-md:                768px;
  --bp-lg:                1024px;
  --bp-xl:                1280px;
}