/* ==========================================================================
   Design token — colori, spaziature, tipografia, motion
   Estratto da variables.css il 18/08/2026: il file era un monolite di 1107
   righe con token, reset, layout, componenti e tre generazioni di homepage
   sovrapposte. Vedi functions.php per l'ordine di caricamento.
   ========================================================================== */

:root {
  /* Palette base sito */
  --sacc-black: #0a0a0a;
  --sacc-ivory: #f8f7f5;
  --sacc-gold: #d4af37;
  --sacc-gold-dark: #9c7c1c;

  /* Font */
  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'Inter', sans-serif;

  /* Raggio angoli: quasi vivo, coerente con estetica boutique/lusso */
  --radius: 2px;

  /* --- Scala dei contenitori (29/08/2026) -------------------------------
     Prima di oggi il sito usava NOVE larghezze diverse scritte a mano
     (700, 780, 800, 900, 960, 1000, 1100, 1200, 1240) sparse fra layout.css,
     components.css, pages-mondo.css e map.css: header a 1200, footer a 1240,
     intro mondo a 1100, prosa a 700 centrata oppure 800 allineata a sinistra
     a seconda del template. Navigando fra le pagine i bordi non tornavano
     mai negli stessi punti — e' l'incoerenza segnalata da Riccardo.

     Ora sono quattro gradini nominati, usati ovunque. Chi ha bisogno di una
     larghezza deve usare uno di questi token, non un numero nuovo. */
  --container-wide: 1240px;    /* sezioni editoriali piene, header, footer */
  --container-content: 1100px; /* griglie e sezioni con media (blog, gallerie, gamma) */
  --container-prose: 900px;    /* prosa larga / accordion a 2 colonne, da desktop */
  --container-text: 760px;     /* colonna di lettura pura */

  /* Margine laterale unico: header, sezioni e footer devono partire tutti
     dallo stesso bordo. L'header usava 40px contro i 20px delle sezioni,
     quindi logo e menu non erano mai allineati al contenuto sottostante. */
  --gutter: 20px;

  --section-space-y: clamp(64px, 9vw, 120px);
  --ink-secondary: #55524a;               /* testo secondario su fondo chiaro */
  --ivory-secondary: rgba(248, 247, 245, .72); /* testo secondario su fondo scuro */
  --hairline: rgba(10, 10, 10, .12);      /* bordi/divisori sottili su chiaro */
  --hairline-on-dark: rgba(248, 247, 245, .18); /* divisori sottili su scuro */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration: .5s;

  /* --- Aggiunti il 18/08/2026 ------------------------------------------ */

  /* Secondo avorio: era gia' usato come #f2efe9 in 6 punti del CSS e in
     map.css, ma non era mai stato dichiarato. E' un colore di fondo a se',
     leggermente piu' caldo di --sacc-ivory, per alternare le fasce chiare. */
  --sacc-ivory-alt: #f2efe9;

  /* Scala grigi: sostituisce i dieci valori sparsi (#222 #333 #444 #555 #666
     #777 #999 #aaa #ccc #ddd) segnalati da docs/DESIGN_SYSTEM.md. */
  --gray-900: #222;
  --gray-800: #333;
  --gray-700: #444;
  --gray-600: #555;
  --gray-500: #666;
  --gray-400: #777;
  --gray-300: #999;
  --gray-200: #aaa;
  --gray-100: #ccc;
  --gray-050: #ddd;

  /* Scala spaziature prescritta da docs/DESIGN_SYSTEM.md e mai implementata. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Palette dei due mondi in homepage: i blocchi .sacc-two-worlds-* ripetevano
     questi quattro valori a mano invece di usare i token, ed erano quindi
     invisibili al design system. */
  --world-piano-base: #0a143c;
  --world-piano-accent: #a09060;
  --world-chitarra-base: #0a0a0a;
  --world-chitarra-accent: #c9964a;

  /* Gradiente "cinematografico" della hero: era ripetuto identico in due
     punti del monolite. */
  --gradient-cinematic: linear-gradient(150deg, #14120c, #0a0a0a 55%, #1c160a);
}

/* Varianti colore per mondo (Bechstein/Heilmann/Fender/PianoShop) —
   valori presi direttamente dalle variabili overrides.scss dei 4 temi
   Shopware, per coerenza visiva tra sito vetrina e shop */
.world-bechstein { --world-accent: #a09060; --world-base: #0a143c; }
.world-heilmann  { --world-accent: #c9986b; --world-base: #2c4a52; }
.world-fender    { --world-accent: #c9964a; --world-base: #0a0a0a; }
.world-piano     { --world-accent: #d4af37; --world-base: #0a0a0a; }

/* --- Desktop ampi e monitor ultrawide (29/08/2026) ----------------------
   Questo allargamento esisteva gia' ma era applicato SOLO alla homepage
   (body.page-template-page-home-php, in pages-home.css): da 1600px in su
   la home portava il contenitore a 88vw mentre ogni altra pagina restava
   a 1240px. Header e footer usano quel contenitore, quindi cambiando
   pagina logo, menu e colonne del footer saltavano lateralmente di
   centinaia di pixel — il "menu che si sposta" segnalato da Riccardo.

   Il token e' ora dichiarato per tutto il sito: la regola della home resta
   la stessa, semplicemente vale ovunque, cosi' l'intelaiatura non si muove
   mai. Le colonne di lettura NON seguono (--container-text/-prose restano
   fissi): allargare la prosa a 2200px la renderebbe illeggibile. */
@media (min-width: 1600px) {
  :root { --container-wide: min(88vw, 2200px); }
}