/* =============================================================
   tokens.css — Design tokens Estia Valutatore
   Fonte: CLAUDE.md §4 + campionatura pixel dal PSD step-1
   ============================================================= */

:root {
    /* Accent */
    --yellow:        #F5BE42;
    --yellow-hover:  #E8AE30;

    /* Blues */
    --blue-header:   #4C70AF;
    --blue-hero:     #243E6A;
    --blue-footer:   #2C4B82;
    --blue-dark:     #1F3A6D;

    /* Text */
    --text-dark:     #3C3C3B;
    --text-muted:    #8A8A89;

    /* Surfaces */
    --white:         #FFFFFF;
    --bg-page:       #F5F6F8;
    --input-dark:    #1F2937;
    --footer-link:   #A8B5CE;
    --footer-muted:  #7C91B8;
    --divider:       #B8C4D9;
    --surface-muted: #F4F3F9;   /* pill/input bg (campionato step-2.psd) */

    /* Feedback (errors, success). Allineato Tailwind red-700 / green-700 per
       contrasto AA su white background. */
    --error-text:    #B91C1C;
    --error-bg:      rgba(185, 28, 28, .06);
    --success-text:  #15803D;

    /* Spacing scale (base 4px) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    /* Typography */
    --font-body: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-card: 0 20px 50px rgba(15, 30, 60, .15);
    --shadow-btn:  0 4px 12px rgba(245, 190, 66, .35);

    /* Overlays / semi-transparent */
    --hero-overlay-start: rgba(36, 62, 106, .85);   /* var(--blue-hero) @ 85% */
    --hero-overlay-end:   rgba(36, 62, 106, .65);   /* var(--blue-hero) @ 65% */
    --hero-vignette:      rgba(18, 40, 74, .35);    /* shade of blue-hero */
    --shadow-stima:       0 2px 4px rgba(0, 0, 0, .08);
    --yellow-soft:        rgba(245, 190, 66, .35);  /* var(--yellow) @ 35% */

    /* Motion */
    --ease-default: cubic-bezier(.2, .7, .2, 1);
    --dur-fast: 150ms;
    --dur-base: 200ms;

    /* Layout */
    --container-max: 1440px;
    --card-max:      1100px;

    /* Chrome — nuova_home fase 1 (top-bar sticky, mega-menu, footer) */
    --accent:        var(--yellow);          /* alias: gold accent (#F5BE42) */
    --accent-hover:  var(--yellow-hover);    /* alias: gold hover (#E8AE30) */
    --accent-ink:    #1F1F1F;               /* leggibile su sfondo --accent */
    --nav-color:     #FFFFFF;               /* colore testo nav su hero scuro */
    --gold:          #F5BE42;               /* token letterale hero.css (= --yellow) */
    --gold-hover:    #E9AD2E;               /* token letterale hero.css (≈ --yellow-hover) */
    --blue-hover:    #3C5D94;               /* --blue-header al hover */
    --ink:           #141618;               /* testo scuro su sfondi chiari */
    --ink-soft:      #2B2B2B;               /* testo scuro secondary */
    --radius-lg:     14px;                  /* border-radius mega-menu */
    --content-max:   1680px;                /* max-width layout nuova_home */
    --chrome-divider: #DCDCDC;              /* separatore colonne mega-menu (grigio neutro,
                                               distinto da --divider: #B8C4D9 del valutatore) */
}