/* ==========================================================================
   SOUND ALCHEMISTS — Token di design (redesign v9)

   Tutti i colori del sito stanno qui e solo qui. Due temi, scelti da una
   classe sul <body> (o su una singola metà della home):
     .theme-espresso   Sound Design, home sinistra, privacy, 404
     .theme-petrol     Mix & Master, home destra
   I fogli di stile leggono SEMPRE le variabili, mai gli esadecimali.
   ========================================================================== */

:root {
  color-scheme: dark;
  --font: "Courier New", Courier, monospace;

  /* Colori comuni ai due temi */
  --sand: #E9DFCC;        /* testo primario, stati attivi, pill */
  --sand-dark: #C9B38C;   /* hover dei link, piccoli accenti, errori */
  --stone: #8A8478;       /* solo il numero "01" della metà Sound Design in home */

  /* I due colori di fondo, sempre disponibili (--bg cambia col tema, questi no):
     servono dove i due temi stanno affiancati, come il velo dell'hero in home */
  --espresso: #211B16;
  --petrol: #14302F;

  --selection-bg: #2A3E69;
  --selection-fg: #FFFFFF;

  /* Tema espresso (predefinito) */
  --bg: #211B16;
  --alt: #271F19;         /* fascia alternata */
  --card: #2E261F;        /* card e segnaposto immagine */
  --line: #342B24;        /* filetti */
  --muted: #A69F93;       /* testo secondario */
  --faint: #6B665D;       /* testo terziario, etichette */
  --on-sand: #211B16;     /* testo sopra un fondo sabbia (pill piene) */

  /* Movimento */
  --ease: cubic-bezier(.16, .84, .3, 1);       /* reveal */
  --ease-soft: cubic-bezier(.2, .7, .2, 1);    /* hover, card */
  --ease-half: cubic-bezier(.65, 0, .25, 1);   /* espansione delle metà in home */

  /* Misure */
  --gutter: 32px;
  --header-h: 64px;
  --radius-card: 20px;
  --radius-option: 12px;
}

.theme-petrol {
  --bg: #14302F;
  --alt: #183735;
  --card: #1D403E;
  --line: #2A4846;
  --muted: #A9C2BD;
  --faint: #6E8F8A;
  --on-sand: #14302F;
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
}
