/* ==========================================================================
   FERRUFFICIO DESIGN TOKENS
   ==========================================================================
   Questo file e' l'UNICO posto dove si definiscono i valori di design.
   Cambi QUI → tutto il sito si aggiorna.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       COLORI BRAND
       ------------------------------------------------------------------ */
    --color-primary:          #FF6600;
    --color-primary-hover:    #e55a00;
    --color-primary-light:    #fff3e6;

    --color-secondary:        #2C5F2D;
    --color-secondary-hover:  #234a24;
    --color-secondary-light:  #e8f5e9;

    /* ------------------------------------------------------------------
       COLORI NEUTRALI
       ------------------------------------------------------------------ */
    --color-white:            #ffffff;
    --color-black:            #000000;
    --color-bg:               #f8f9fa;
    --color-bg-alt:           #f0f0f0;
    --color-border:           #e0e0e0;
    --color-border-light:     #eeeeee;

    /* ------------------------------------------------------------------
       COLORI TESTO
       ------------------------------------------------------------------ */
    --color-text:             #333333;
    --color-text-light:       #666666;
    --color-text-muted:       #999999;
    --color-text-inverse:     #ffffff;

    /* ------------------------------------------------------------------
       COLORI STATO
       ------------------------------------------------------------------ */
    --color-success:          #28a745;
    --color-success-bg:       #d4edda;
    --color-error:            #dc3545;
    --color-error-bg:         #f8d7da;
    --color-warning:          #ffc107;
    --color-warning-bg:       #fff3cd;
    --color-info:             #17a2b8;
    --color-info-bg:          #d1ecf1;

    /* ------------------------------------------------------------------
       TIPOGRAFIA
       ------------------------------------------------------------------ */
    --font-body:              "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading:           "Inter", "Source Sans Pro", sans-serif;
    --font-mono:              "Fira Code", "Consolas", monospace;

    --font-size-xs:           0.75rem;    /* 12px */
    --font-size-sm:           0.875rem;   /* 14px */
    --font-size-base:         1rem;       /* 16px */
    --font-size-md:           1.125rem;   /* 18px */
    --font-size-lg:           1.25rem;    /* 20px */
    --font-size-xl:           1.5rem;     /* 24px */
    --font-size-2xl:          2rem;       /* 32px */
    --font-size-3xl:          2.5rem;     /* 40px */
    --font-size-4xl:          3rem;       /* 48px */

    --font-weight-light:      300;
    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    --line-height-tight:      1.2;
    --line-height-normal:     1.5;
    --line-height-relaxed:    1.75;

    /* ------------------------------------------------------------------
       SPAZIATURA (scala 4px)
       ------------------------------------------------------------------ */
    --space-1:    0.25rem;    /*  4px */
    --space-2:    0.5rem;     /*  8px */
    --space-3:    0.75rem;    /* 12px */
    --space-4:    1rem;       /* 16px */
    --space-5:    1.25rem;    /* 20px */
    --space-6:    1.5rem;     /* 24px */
    --space-8:    2rem;       /* 32px */
    --space-10:   2.5rem;     /* 40px */
    --space-12:   3rem;       /* 48px */
    --space-16:   4rem;       /* 64px */
    --space-20:   5rem;       /* 80px */

    /* ------------------------------------------------------------------
       LAYOUT
       ------------------------------------------------------------------ */
    --container-max:          1200px;
    --container-narrow:       800px;
    --container-wide:         1400px;
    --container-padding:      var(--space-4);

    --header-height:          76px;
    --header-height-mobile:   60px;
    --footer-min-height:      200px;

    --sidebar-width:          280px;
    --sidebar-gap:            var(--space-6);

    /* ------------------------------------------------------------------
       COMPONENTI
       ------------------------------------------------------------------ */
    --border-radius-sm:       4px;
    --border-radius:          8px;
    --border-radius-lg:       12px;
    --border-radius-full:     9999px;

    --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow:                 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg:              0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl:              0 8px 32px rgba(0, 0, 0, 0.15);

    --transition-fast:        150ms ease;
    --transition:             250ms ease;
    --transition-slow:        400ms ease;

    /* ------------------------------------------------------------------
       BOTTONI
       ------------------------------------------------------------------ */
    --btn-padding-x:          var(--space-6);
    --btn-padding-y:          var(--space-3);
    --btn-font-size:          var(--font-size-base);
    --btn-font-weight:        var(--font-weight-semibold);
    --btn-border-radius:      var(--border-radius);

    /* ------------------------------------------------------------------
       CARD PRODOTTO
       ------------------------------------------------------------------ */
    --card-padding:           var(--space-4);
    --card-gap:               var(--space-6);
    --card-border-radius:     var(--border-radius);
    --card-shadow:            var(--shadow-sm);
    --card-shadow-hover:      var(--shadow-lg);

    /* ------------------------------------------------------------------
       SHOP GRID
       ------------------------------------------------------------------ */
    --shop-columns:           4;
    --shop-columns-tablet:    2;
    --shop-columns-mobile:    1;
    --shop-gap:               var(--space-6);

    /* ------------------------------------------------------------------
       HERO / BANNER
       ------------------------------------------------------------------ */
    --hero-height:            300px;
    --hero-height-mobile:     200px;
    --hero-overlay-opacity:   0.5;
    --hero-text-color:        var(--color-white);

    /* ------------------------------------------------------------------
       FORM / INPUT
       ------------------------------------------------------------------ */
    --input-height:           44px;
    --input-padding-x:        var(--space-4);
    --input-border-radius:    var(--border-radius-sm);
    --input-border-color:     var(--color-border);
    --input-focus-color:      var(--color-primary);

    /* ------------------------------------------------------------------
       LOGO
       ------------------------------------------------------------------ */
    --logo-height:            56px;
    --logo-width:             180px;

    /* ------------------------------------------------------------------
       Z-INDEX
       ------------------------------------------------------------------ */
    --z-dropdown:             100;
    --z-sticky:               200;
    --z-header:               300;
    --z-overlay:              400;
    --z-modal:                500;
    --z-toast:                600;

    /* ------------------------------------------------------------------
       BREAKPOINTS (documentati, usati nei media query)
       Mobile-first: min-width
       --bp-sm:   576px   (landscape phone)
       --bp-md:   768px   (tablet)
       --bp-lg:   992px   (desktop)
       --bp-xl:   1200px  (large desktop)
       --bp-xxl:  1400px  (extra large)
       ------------------------------------------------------------------ */
}