/* ============================================================
   HitnSpin Italia — Design Tokens
   Palette del marchio (viola / arancio / oro)
   + accenti del tricolore italiano (verde / bianco / rosso).
   Direzione più calda e mediterranea (oro in primo piano),
   accento secondario smeraldo al posto del blu nordico.
   Cambi gli HEX qui — cambia tutto il sito.
   ============================================================ */

:root {
  /* --- Brand core (dal logo) --- */
  --brand-purple:       #4a0052;  /* viola principale */
  --brand-purple-deep:  #260030;
  --accent:             #d4481f;  /* arancio-rosso CTA */
  --accent-hover:       #ff5000;
  --accent-bright:      #ff8b34;

  /* --- Smeraldo italiano (accento secondario — sostituisce il blu nordico) --- */
  --emerald:      #008c45;   /* verde tricolore */
  --emerald-deep: #00682f;
  --nordic:       #008c45;   /* alias: vecchio "nordic" punta ora allo smeraldo */
  --nordic-deep:  #00682f;
  --wine:         #008c45;   /* alias mantenuto per il CSS */
  --wine-deep:    #00682f;

  /* --- Oro / VIP (in primo piano) --- */
  --gold:        #ffc400;
  --gold-deep:   #f0a200;
  --gold-soft:   #ffe07a;
  --cream:       #fff0b0;

  /* --- Rosso (CTA-fuoco del marchio + rosso tricolore) --- */
  --red:         #cd212a;
  --red-deep:    #9f0400;

  /* --- Accenti del tricolore italiano (verde / bianco / rosso) --- */
  --flag-red:    #cd212a;   /* rosso tricolore */
  --flag-green:  #008c45;   /* verde tricolore */
  --flag-black:  #00682f;   /* verde scuro per i bordi (evita il bianco su superfici chiare) */
  --flag-white:  #ffffff;   /* neutro (badge 18+ su sfondo scuro) */
  --flag-blue:   #008c45;   /* alias verso il verde */
  --flag-yellow: #ffc400;

  /* --- Tema chiaro (più caldo, mediterraneo) --- */
  --bg-base:     #fbf8f3;   /* base body — bianco caldo */
  --bg-alt-1:    #fbf3e6;   /* alternante A (crema calda) — fase invertita rispetto a SV */
  --bg-alt-2:    #eef6ee;   /* alternante B (verde tenue) */
  --bg-card:     #ffffff;   /* card / tabelle */
  --bg-card-2:   #f3efe6;   /* zebra crema calda */

  /* --- Testo --- */
  --text:        #221a14;
  --text-muted:  #57503f;
  --text-dim:    #8a8170;

  /* --- Bordi / divisori --- */
  --border:      #e7ddcb;
  --border-soft: #efe8da;

  /* --- Stati fedeltà --- */
  --status-bronze:   #c98a4b;
  --status-silver:   #d6dde6;
  --status-gold:     #ffc700;
  --status-platinum: #e8f0ff;

  /* --- Semantica --- */
  --pro:  #1f9d57;
  --con:  #d9342b;

  /* --- Gradienti del marchio --- */
  --grad-fire:   linear-gradient(135deg, #ff8b34 0%, #d4481f 45%, #9f0400 100%);
  --grad-gold:   linear-gradient(135deg, #ffe07a 0%, #ffc400 55%, #f0a200 100%);
  --grad-purple: linear-gradient(135deg, #4a0052 0%, #260030 100%);
  /* "jewel" in chiave italiana: oro → smeraldo → rosso (barra H2, marcatori liste, note, step) */
  --grad-jewel:  linear-gradient(135deg, #ffc400 0%, #008c45 55%, #cd212a 100%);
  /* barra verticale davanti agli H2 / bordo card-flag: tricolore verde/bianco/rosso */
  --grad-flag:   linear-gradient(180deg, #008c45 0%, #008c45 33%, #ffffff 33%, #ffffff 66%, #cd212a 66%, #cd212a 100%);
  /* fascia sottile orizzontale (header/footer/hero/sottolineatura) — tricolore italiano */
  --grad-flag-h: linear-gradient(90deg, #008c45 0%, #008c45 33%, #f4f9ff 33%, #f4f9ff 66%, #cd212a 66%, #cd212a 100%);

  /* --- Tipografia --- */
  --font-head: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --fs-h1: clamp(1.9rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: 1.02rem;
  --fs-small: 0.88rem;

  /* --- Raggi / ombre / spaziatura --- */
  --radius-sm: 6px;
  --radius:    11px;
  --radius-lg: 18px;
  --radius-asym: 18px 4px 18px 4px;  /* linea italiana: squircle asimmetrico (al posto del raggio uniforme SV) */

  --shadow-sm: 0 3px 10px rgba(17, 17, 17, .10);
  --shadow:    0 16px 38px rgba(17, 17, 17, .16);
  --shadow-accent: 0 9px 24px rgba(205, 33, 42, .28);
  --shadow-gold:   0 9px 24px rgba(255, 175, 0, .30);

  --container: 1140px;
  --header-h: 70px;
  --gap: clamp(1rem, 3vw, 2.2rem);
}