/* ===========================================================================
   goEnergy · Design Tokens (F7 → F8)
   HEX values estratti direttamente dalla grafica fornita - nessun arrotondamento.
   Unica fonte di verità per colore, tipografia, spazi, layout.
   =========================================================================== */
:root {
  /* === PALETTE === */
  --color-primary:        #20B0A8; /* teal brillante - accenti, gradiente hero, link */
  --color-primary-dark:   #093C62; /* petrolio profondo - testo, box CTA scuro, footer */
  --color-primary-light:  #289296; /* teal medio - tappa intermedia gradienti */
  --color-primary-deep:   #196177; /* petrolio-teal - tappa gradiente footer/hero */

  --color-accent:         #EFCEB1; /* sabbia/crema - card, pill nav, box newsletter */
  --color-accent-dark:    #E3B68F; /* sabbia scuro - hover su superfici crema */

  --color-bg:             #FFFFFF;
  --color-bg-secondary:   #F4F7F8; /* grigio-teal appena percettibile per sezioni alterne */
  --color-bg-tertiary:    #EFCEB1;

  --color-text:           #093C62; /* corpo testo su fondo chiaro */
  --color-text-muted:     #4F6377; /* testo secondario */
  --color-text-inverted:  #FFFFFF; /* testo su fondo teal/petrolio */
  --color-footer-title:   #7E97A6; /* titoli non cliccabili nel footer */

  --color-border:         #DBE4E6;
  --color-border-strong:  #093C62;

  --color-cta:            #093C62; /* bottoni primari (petrolio, come da grafica) */
  --color-cta-hover:      #0C4E7E;

  --color-star:           #F5B22D; /* stelle recensioni Google */
  --color-success:        #20B0A8;
  --color-error:          #B00020; /* errori di validazione: AA su crema (4.9:1) e su bianco (7.3:1) */

  /* === GRADIENTI BRAND === */
  --gradient-hero: linear-gradient(115deg,
                   var(--color-primary-dark) 0%,
                   var(--color-primary-deep) 38%,
                   var(--color-primary-light) 70%,
                   var(--color-primary) 100%);
  --gradient-footer: linear-gradient(110deg,
                   var(--color-primary-dark) 0%,
                   var(--color-primary-deep) 45%,
                   var(--color-primary) 100%);

  /* === GRADIENTE HEADER (uniforme, come immagine coordinata) === */
  --gradient-header: linear-gradient(115deg, #14506E 0%, #1A7283 55%, #218E9C 100%);

  /* === DECORO ANELLI BRAND (marchio goEnergy sfumato) === */
  --deco-ring-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220.5%22%20y1%3D%220%22%20x2%3D%220.5%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23123F60%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%23154F68%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231A6576%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2272%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%2244%22%20stroke-opacity%3D%22.88%22%2F%3E%3C%2Fsvg%3E");
  --deco-ring-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220.4%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2336BFB7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2323A0A2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2272%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%2244%22%20stroke-opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E");

  /* === TIPOGRAFIA === */
  --font-display: 'Montserrat', system-ui, sans-serif; /* titoli geometrici uppercase */
  --font-body:    'Open Sans', system-ui, sans-serif;  /* corpo, leggibile e neutro */

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.75rem;   /* 44 */
  --text-4xl:  clamp(2.25rem, 5.2vw, 3.5rem); /* H1 hero - ridotto per non spezzare le parole */
  --text-5xl:  clamp(3rem, 9vw, 5rem);       /* numeri statistiche */

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* === SPAZI (sistema 8px) === */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* === LAYOUT === */
  --navbar-h:         88px;  /* altezza header (navbar trasparente in overlay) */
  --max-width:        1200px; /* contenitore principale (SITE BRIEF) */
  --max-width-text:   680px;  /* testo lungo, 65-75 char/riga */
  --max-width-narrow: 460px;  /* form e contenuti centrati */
  --gutter:    clamp(16px, 4vw, 48px);
  --section-y: clamp(56px, 8vw, 112px);

  /* === RAGGI === */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-full: 9999px;

  /* === OMBRE === */
  --shadow-sm: 0 1px 3px rgba(9, 60, 98, 0.08);
  --shadow-md: 0 6px 20px rgba(9, 60, 98, 0.12);
  --shadow-lg: 0 14px 40px rgba(9, 60, 98, 0.18);

  /* === TRANSIZIONI === */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-spring: 320ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX === */
  --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-nav: 400; --z-top: 500;
}