/* Identità di Marketify: direzione "Mercato" (scelta il 2026-11-03).
   Blocchi di colore pieno ad alto contrasto: prugna notte, fucsia, giallo, rosa carta.
   Scrivi i colori in esadecimale (#RRGGBB): node build.mjs controlla i contrasti. */

:root{
  color-scheme:light;

  /* colori */
  --color-primary:#1A0712;          --color-on-primary:#FFFFFF;    /* prugna notte: testata, hero, sezioni scure */
  --color-secondary:#FFE4EE;        --color-on-secondary:#1A0712;  /* rosa carta */
  --color-accent:#FF2D7A;           --color-on-accent:#1A0712;     /* fucsia: pulsante principale */
  --color-background:#FFFFFF;       --color-foreground:#1A0712;
  --color-card:#FFFFFF;             --color-card-foreground:#1A0712;
  --color-muted:#FFF1F6;            --color-muted-foreground:#5C3348;
  --color-border:#F0C2D4;
  --color-link:#C2105A;             /* fucsia scuro: leggibile su bianco e rosa */
  --color-ring:#C2105A;

  /* colori in più della direzione Mercato */
  --color-giallo:#FFD23F;           /* su prugna o con testo prugna */
  --color-fucsia-scuro:#C2105A;
  --color-notte-2:#2A0F1F;          /* prugna un filo più chiara, per stacchi nelle sezioni scure */
  --color-rosa-su-notte:#FFB3CF;    /* testo secondario sulle sezioni scure */

  /* caratteri: un'unica famiglia, stretta per i titoli e normale per i testi */
  --font-heading:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --heading-weight:900;
  --heading-tracking:0;
  --heading-stretch:62%;

  /* forme */
  --radius:6px;
  --radius-lg:10px;
  --radius-tag:6px 28px 28px 6px;   /* cartellino del prezzo */
  --shadow-sm:0 1px 2px rgba(26,7,18,.08);
  --shadow-md:0 6px 14px -4px rgba(26,7,18,.16);
  --shadow-lg:0 18px 36px -14px rgba(26,7,18,.35);

  /* spazi */
  --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem;
  --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem;
  --section-pad:clamp(64px,9vw,120px);
  /* aperture di tutte le pagine (home, servizi, pagine interne): stesso spazio sotto la testata */
  --apertura-su:clamp(36px,4.4vw,64px);
  --apertura-giu:clamp(64px,8vw,112px);
  --wrap:1200px;
  --gutter:20px;

  /* movimento */
  --dur:180ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Soglie per i dispositivi (le stesse in tutto style.css, sezione 8):
   telefono fino a 599px · tablet 600-1023px (menu compatto) · computer 1024-1599px · schermo grande da 1600px (e da 2200px).
   Sugli schermi grandi il contenuto si allarga e i caratteri crescono un poco. */
@media (min-width:1600px){:root{--wrap:1440px;--gutter:32px}}
@media (min-width:2200px){:root{--wrap:1680px;--gutter:40px}}