/* ============================================================
   TEMA · OVERFIT FITNESS CENTER (Catania)
   Palette firma dal logo: "OVER" bianco + "FIT" rosso #E60515,
   la I di FIT e' un bilanciere, sotto una linea ECG rossa.
   Il loro sito e' gia' dark con accenti rossi -> parliamo la
   stessa lingua: charcoal profondo + rosso segnale, con un
   ambra/bronzo come secondo accento (codifica "Design").
   ============================================================ */
:root {
  --brand:       #D9101E;   /* rosso core (CTA, bordi chip Marketing) */
  --brand-deep:  #97070F;   /* profondita' del gradiente / hover */
  --brand-light: #FF3B45;   /* rosso acceso: leggibile su fondo scuro */

  --charcoal:    #17181A;   /* nero-grafite del loro sito (firma) */
  --charcoal-2:  #0A0B0C;   /* fondo profondo per i gradienti */
  --ink:         #0C0D0F;   /* testo su chiaro */
  --cream:       #F7F6F4;   /* bianco neutro leggermente caldo */

  --gold:        #E0A34A;   /* ambra — stat + accento Design (su scuro) */
  --sand:        #F0C98C;   /* unita' di misura nelle stat */
  --stone:       #5E6165;   /* testo secondario */
  --sand-border: #E5E2DD;   /* bordi su fondo chiaro */
}

/* ------------------------------------------------------------
   Contrasto sui fondi CHIARI.
   --gold e --brand-light sono tarati per il fondo scuro: sulla
   crema diventerebbero slavati. Qui li ridefiniamo scuri a
   livello di .device, cosi' --accent2 (che li deriva) eredita
   il valore giusto senza toccare il motore.
   ------------------------------------------------------------ */
.device[data-tone="light"] {
  --gold:        #A9691F;   /* bronzo scuro: leggibile sulla crema */
  --brand-light: #C60D19;   /* rosso profondo per il serif della demo */
}

/* ------------------------------------------------------------
   Fondi e orbs: il motore e' tarato warm-arancio (Sculptors),
   qui li ricalibriamo sul rosso. Stessa specificita', vince il tema.
   ------------------------------------------------------------ */
.story[data-bg="light"] {
  background: radial-gradient(120% 80% at 80% -10%, #FFFFFF 0%, var(--cream) 55%, #EFECE8 100%);
  --orb-a: rgba(217, 16, 30, 0.13);
  --orb-b: rgba(224, 163, 74, 0.16);
}
.story[data-bg="dark"] {
  --orb-a: rgba(255, 59, 69, 0.24);
  --orb-b: rgba(224, 163, 74, 0.14);
}
.story[data-bg="brand"] {
  background: linear-gradient(155deg, #3D0A0E 0%, var(--charcoal) 45%, var(--charcoal-2) 100%);
  --orb-a: rgba(217, 16, 30, 0.48);
  --orb-b: rgba(255, 59, 69, 0.20);
}

/* ------------------------------------------------------------
   ★ Logo CHIARO (bianco + rosso) — al contrario di Sculptors.
   Il motore mette avatar e chip-cover su fondo bianco/crema:
   li' la wordmark "OVER" bianca sparirebbe. Li rendiamo scuri.
   ------------------------------------------------------------ */
.topbar .logo {
  background-color: var(--charcoal);
  background-size: 66% auto;                    /* la "FIT" respira nel quadrato */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.s-cover .logo-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.s-cover .logo-chip img { height: 30px; }