/* =============================================================
   husbikes.com — Design Tokens
   Single source of truth per palette, font, scala, spazi.
   Aggiornare qui propaga su tutto il sito.
   ============================================================= */

:root {
    /* ---------- Palette HUS ---------- */
    --color-primary:        #195da5;     /* Blu HUS */
    --color-primary-dark:   #11437a;     /* shade per hover/sfondi profondi */
    --color-primary-light:  #2a78c9;     /* tint per accenti soft */

    --color-accent:         #fcea0f;     /* Giallo HUS */
    --color-accent-dark:    #d6c70b;     /* shade hover su accent */

    --color-black:          #000000;
    --color-white:          #ffffff;
    --color-grey:           #c8c8c7;
    --color-grey-50:        #f4f5f7;     /* background sezioni soft */
    --color-grey-100:       #e6e7e9;
    --color-grey-300:       #adb1b8;
    --color-grey-500:       #5a6170;     /* testo body secondario */
    --color-grey-700:       #2a2e36;     /* testo body scuro */
    --color-grey-900:       #0e0e10;     /* testo nero "ricco" */

    --color-success:        #1e9e5f;
    --color-danger:          #d63333;

    /* Alias semantici */
    --color-bg:             var(--color-white);
    --color-bg-dark:        var(--color-primary);
    --color-bg-darker:      var(--color-grey-900);
    --color-text:           var(--color-grey-900);
    --color-text-muted:     var(--color-grey-500);
    --color-text-on-dark:   var(--color-white);
    --color-link:           var(--color-primary);
    --color-link-hover:     var(--color-primary-dark);

    /* ---------- Tipografia ---------- */
    --font-display:         "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-body:            "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Pesi Montserrat usati: 400 Regular, 600 SemiBold, 900 Black + 900 Black Italic */
    --fw-regular:           400;
    --fw-semibold:          600;
    --fw-black:             900;

    /* Scala tipografica fluida (mobile -> desktop con clamp) */
    --fs-h1:                clamp(2.5rem, 4vw + 1rem, 5rem);     /* 40px → 80px */
    --fs-h2:                clamp(2rem, 3vw + 0.8rem, 3.5rem);   /* 32px → 56px */
    --fs-h3:                clamp(1.5rem, 1.8vw + 0.6rem, 2.25rem); /* 24px → 36px */
    --fs-h4:                clamp(1.25rem, 1vw + 0.5rem, 1.5rem);   /* 20px → 24px */
    --fs-body:              1rem;                                  /* 16px */
    --fs-body-lg:           1.0625rem;                             /* 17px desktop */
    --fs-small:             0.875rem;                              /* 14px */
    --fs-xs:                0.75rem;                               /* 12px */

    /* Line-height */
    --lh-tight:             1.05;
    --lh-snug:              1.2;
    --lh-normal:            1.5;
    --lh-relaxed:           1.65;

    /* Letter-spacing */
    --ls-tight:             -0.02em;
    --ls-normal:            0;
    --ls-wide:              0.04em;
    --ls-wider:             0.08em;

    /* ---------- Spaziatura (scala 8px) ---------- */
    --sp-0:                 0;
    --sp-1:                 0.25rem;        /* 4px */
    --sp-2:                 0.5rem;         /* 8px */
    --sp-3:                 1rem;           /* 16px */
    --sp-4:                 1.5rem;         /* 24px */
    --sp-5:                 2rem;           /* 32px */
    --sp-6:                 3rem;           /* 48px */
    --sp-7:                 4rem;           /* 64px */
    --sp-8:                 6rem;           /* 96px */
    --sp-9:                 8rem;           /* 128px */

    /* ---------- Layout ---------- */
    --container-max:        80rem;          /* 1280px */
    --container-pad:        clamp(1rem, 4vw, 4rem);

    /* ---------- Breakpoint (riferimento, le media query usano valori espliciti) ---------- */
    /* sm: 480px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

    /* ---------- Bordi ---------- */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            16px;
    --radius-pill:          999px;

    --border-width:         1px;
    --border-color:         var(--color-grey-100);

    /* ---------- Ombre ---------- */
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 12px 32px rgba(0, 0, 0, 0.18);

    /* ---------- Transizioni ---------- */
    --t-fast:               120ms ease-out;
    --t-base:               200ms ease-out;
    --t-slow:               360ms ease-out;

    /* ---------- Z-index ---------- */
    --z-base:               1;
    --z-overlay:            10;
    --z-header:             100;
    --z-modal:              1000;
    --z-toast:              2000;
}