/**
* Design tokens - Restyling UX/CRO (W&CS, ottobre 2026)
* Fonte: export Figma "T-LIGHT _ CAPRIOTTI" (src/Docs/UX/css_export)
*
* Solo variabili, nessuna regola: il file non cambia l'aspetto delle pagine
* finché i componenti non le usano. Prefisso --tl- per non collidere con
* le variabili del template BootstrapMade (main.css).
*/

/*--------------------------------------------------------------
# Font
--------------------------------------------------------------*/
/* Neue Haas Grotesk Display, pesi 400 e 500.
   Serve la licenza web: i file in /font/neue sono trial e non vanno usati in produzione. */
:root {
    --tl-font-family: 'Neue Haas Grotesk Display Pro', 'Haas Grot Disp', "Helvetica Neue", Arial, sans-serif;
    --tl-font-weight-regular: 400;
    --tl-font-weight-medium: 500;
}

/*--------------------------------------------------------------
# Colori
--------------------------------------------------------------*/
:root {
    /* Brand */
    --tl-yellow: #ffc700;            /* CTA, pulsanti primari, chip attivi */
    --tl-navy: #253f59;              /* titoli, badge "Saltafila", link */
    --tl-navy-rgb: 37, 63, 89;
    --tl-red: #c82834;               /* prezzi in carrello e checkout */
    --tl-blue: #0048ec;              /* icone di rassicurazione, pulsante "Applica" */
    --tl-blue-dark: #002173;         /* barra sticky del totale */
    --tl-navy-dark: #021c36;         /* pulsante "Cerca" dell'hero, fondo del footer */

    /* Testo */
    --tl-text: #222222;
    --tl-text-muted: #5c5b5b;
    --tl-text-inverse: #ffffff;

    /* Superfici */
    --tl-surface: #ffffff;
    --tl-surface-alt: #eceef1;       /* sezioni alternate */
    --tl-surface-subtle: #f8f9fa;
    --tl-surface-info: #c6e2ff;      /* box promo / informativi */
    --tl-surface-muted: #e7e7e7;     /* intestazione del riepilogo carrello */
    --tl-chip-on-image: rgba(255, 255, 255, 0.7);
    --tl-overlay: rgba(43, 61, 84, 0.6);

    /* Bordi */
    --tl-border: #d9d9d9;
    --tl-border-muted: #5c5b5b;      /* box di carrello e checkout, campi dei form */
    --tl-border-strong: #222222;

    /* Footer */
    --tl-footer-top: #2b3e55;
    --tl-footer-bottom: var(--tl-navy-dark);
}

/*--------------------------------------------------------------
# Tipografia (font-size / line-height)
--------------------------------------------------------------*/
:root {
    --tl-fs-display: 80px;   --tl-lh-display: 96px;
    --tl-fs-hero: 48px;      --tl-lh-hero: 52px;
    --tl-fs-h1: 32px;        --tl-lh-h1: 38px;
    --tl-fs-h2: 28px;        --tl-lh-h2: 34px;
    --tl-fs-h3: 24px;        --tl-lh-h3: 32px;
    --tl-fs-h4: 22px;        --tl-lh-h4: 26px;
    --tl-fs-lg: 20px;        --tl-lh-lg: 24px;     /* titolo card, CTA grandi */
    --tl-fs-md: 18px;        --tl-lh-md: 22px;
    --tl-fs-base: 16px;      --tl-lh-base: 20px;   /* testo, pulsanti */
    --tl-fs-sm: 14px;        --tl-lh-sm: 18px;
    --tl-fs-xs: 12px;        --tl-lh-xs: 14px;     /* chip, meta card */
    --tl-fs-xxs: 10px;       --tl-lh-xxs: 12px;
}

/*--------------------------------------------------------------
# Forme, ombre, spaziature
--------------------------------------------------------------*/
:root {
    --tl-radius-pill: 100px;     /* pulsanti, chip, barra di ricerca */
    --tl-radius-lg: 22px;
    --tl-radius-md: 16px;
    --tl-radius-card: 10px;      /* card e box */
    --tl-radius-sm: 4px;

    --tl-shadow-sm: 0 2px 8.4px rgba(0, 0, 0, 0.13);
    --tl-shadow-md: 0 4px 4px rgba(0, 0, 0, 0.25);

    --tl-space-1: 5px;
    --tl-space-2: 10px;
    --tl-space-3: 15px;
    --tl-space-4: 20px;
    --tl-space-5: 30px;
    --tl-space-6: 40px;

    /* Layout: margini laterali 80px su desktop 1440, 20px su mobile 393 */
    --tl-container-max: 1280px;
    --tl-gutter-desktop: 80px;
    --tl-gutter-mobile: 20px;
    --tl-header-height: 80px;
}

/*--------------------------------------------------------------
# Componenti (misure dai mockup)
--------------------------------------------------------------*/
:root {
    --tl-btn-height: 50px;
    --tl-btn-height-lg: 59px;           /* "Vedi disponibilità", "Continua al pagamento" */
    --tl-input-height: 50px;
    --tl-chip-height: 32px;             /* barra filtri rapidi */
    --tl-chip-on-image-height: 26px;    /* categoria su immagine card */
    --tl-badge-height: 20px;            /* badge navy "Saltafila" */

    --tl-card-width: 312px;
    --tl-card-height: 383px;
    --tl-card-image-height: 212px;
    --tl-card-width-mobile: 357px;
    --tl-card-image-height-mobile: 237px;
}