/* ============================================================
   Faser Shop — sistema di design
   Ogni valore usato altrove deve venire da qui.
   Cambiare un colore o un font significa cambiare una riga sola.
   ============================================================ */
:root{
  /* --- colore ---------------------------------------------
     Blu profondo da strumento di bordo, non da brochure di yacht.
     L'ambra e' il segnale: la usa SOLO l'azione d'acquisto. */
  --blu-900:#0B1F2A;   --blu-800:#12303F;   --blu-700:#1A4356;
  --blu-600:#22586F;   --blu-500:#2E7391;   --blu-100:#DCE8ED;
  --blu-050:#EFF5F7;

  --ambra-600:#B45309; --ambra-500:#D97706; --ambra-400:#F59E0B;
  --ambra-050:#FEF6E7;

  /* neutri con una punta di freddo: accostati al blu non sporcano */
  --grigio-900:#111A1F; --grigio-700:#3B4A52; --grigio-500:#697C86;
  --grigio-400:#93A3AB; --grigio-300:#C9D3D8; --grigio-200:#E2E9EC;
  --grigio-100:#F1F5F6; --bianco:#FFFFFF;

  --ok-600:#15803D;    --ok-050:#E8F5EC;
  --avviso-600:#B45309;--avviso-050:#FEF6E7;
  --errore-600:#B91C1C;--errore-050:#FDECEC;

  /* --- ruoli ---------------------------------------------- */
  --sfondo:var(--bianco);
  --sfondo-alt:var(--grigio-100);
  --testo:var(--grigio-900);
  --testo-soft:var(--grigio-700);
  --testo-tenue:var(--grigio-500);
  --bordo:var(--grigio-200);
  --bordo-forte:var(--grigio-300);
  --azione:var(--ambra-500);
  --azione-hover:var(--ambra-600);
  --link:var(--blu-600);

  /* --- tipografia -----------------------------------------
     Stack di sistema: zero richieste di rete, nessun problema
     GDPR con Google Fonts, primo render immediato.
     Per passare a un font proprio basta cambiare qui. */
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-ui);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1rem;
  --t-lg:1.125rem; --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem;

  /* --- spazio: scala di 4px -------------------------------- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;

  --r-sm:3px; --r:5px; --r-lg:8px; --r-full:999px;

  --ombra-1:0 1px 2px rgba(11,31,42,.06);
  --ombra-2:0 2px 8px rgba(11,31,42,.08);
  --ombra-3:0 8px 24px rgba(11,31,42,.12);

  --contenitore:1360px;
  --header-h:64px;

  --transizione:.15s ease;
}

/* Il sito e' pensato chiaro. Rispettiamo comunque chi ha il sistema
   in scuro riducendo l'abbagliamento, senza inventare un secondo tema. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="chiaro"]){ --sfondo-alt:#EDF1F3; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}