/* ============================================================
 * VARIABLES.CSS — Design tokens
 * Palette anni '70 inviata da Rebecca (04/08/2026):
 *   Arancione #D56B27 — CTA, link
 *   Giallo Senape #DCA839 — badge Camper, accenti
 *   Verde Chiaro #8AA055 — badge Auto, secondario
 *   Viola Prugna #6C396B — header, badge Fly&Drive
 *   Bianco Panna #F4F0E1 — sfondo pagina
 *   Marrone Scuro #261814 — testo, footer
 * ============================================================ */

:root {
    /* === Colori Principali === */
    --color-primary:        #D56B27;   /* Arancione — CTA, header, link */
    --color-primary-light:  #E8883D;   /* Arancione chiaro — hover */
    --color-primary-dark:   #B84D1B;   /* Arancione scuro — active */
    --color-secondary:      #DCA839;   /* Giallo Senape — badge Camper, accenti caldi */
    --color-secondary-light:#EBC560;   /* Giallo Senape chiaro */
    --color-accent:         #8AA055;   /* Verde Chiaro — badge Auto, freschezza */

    /* === Sfondi — caldi, anni '70 === */
    --color-bg:             #F4F0E1;   /* Bianco Panna (Ali, Fiori) */
    --color-bg-alt:         #EFE6CC;   /* Crema (Sfondo) */
    --color-bg-white:       #FFFFFF;

    /* === Testo === */
    --color-text:           #261814;   /* Marrone Scuro/Nero */
    --color-text-light:     #8AA055;   /* Verde Chiaro */
    --color-text-muted:     #A2629F;   /* Viola Lilla */
    --color-text-inverse:   #F4F0E1;   /* Bianco Panna */

    /* === Header / Footer === */
    --color-header-bg:      #6C396B;   /* Viola Prugna */
    --color-footer-bg:      #261814;   /* Marrone Scuro/Nero */

    /* === Badge Categorie — colori pieni, tutti distinti === */
    --color-badge-camper:   #DCA839;   /* Giallo Senape */
    --color-badge-moto:     #B2382D;   /* Rosso Mattone */
    --color-badge-auto:     #8AA055;   /* Verde Chiaro */
    --color-badge-flydrive: #6C396B;   /* Viola Prugna */

    /* === Bordi e Ombre === */
    --color-border:         #EFE6CC;
    --color-border-light:   #F4F0E1;
    --shadow-card:          0 2px 12px rgba(38, 24, 20, 0.08);
    --shadow-card-hover:    0 4px 20px rgba(38, 24, 20, 0.14);
    --shadow-nav:           0 2px 12px rgba(38, 24, 20, 0.18);

    /* === Tipografia === */
    --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-h1: clamp(2rem, 5vw, 3.2rem);
    --fs-h2: clamp(1.5rem, 3.5vw, 2.2rem);
    --fs-h3: clamp(1.2rem, 2.5vw, 1.6rem);
    --fs-body:   1.05rem;
    --fs-small:  0.88rem;
    --fs-meta:   0.8rem;

    --lh-heading: 1.25;
    --lh-body:    1.7;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold:   700;

    /* === Spaziature === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;

    --container-max:   1200px;
    --container-narrow: 780px;
    --container-text:   680px;

    /* === Griglia Post === */
    --grid-gap: 1.5rem;
    --card-radius: 6px;

    /* === Transizioni === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* === Z-index === */
    --z-header:  100;
    --z-overlay: 200;
    --z-modal:   300;

    /* === Globo Interattivo — palette anni '70 teal scaldato === */
    --globe-graticule:     rgba(38, 24, 20, 0.06);
    --globe-land-outline:  #53782F;
    --globe-land-fill:     rgba(200, 202, 188, 0.88);  /* sage-grigio tenue: paesi non visitati poco vistosi, colore stabile */
    --globe-highlight:     #E8C547;    /* giallo senape acceso — visitati */
    --globe-highlight-glow: rgba(232, 197, 71, 0.30);

    /* Oceano: teal → warm deep → prugna (3-stop gradiente) */
    --globe-ocean-start:   #0DA58D;    /* teal brillante (lato luce) */
    --globe-ocean-mid:     #0F7264;    /* teal profondo scaldato */
    --globe-ocean-end:     #4B2E5D;    /* prugna smorzata (bordo ombra) */
    --globe-ocean-shine:   rgba(255, 255, 255, 0.15);
    --globe-shadow:        rgba(38, 24, 20, 0.25);
}