/* ============================================================================
   RIVANDO MALL — Design Tokens
   Allineato all'identità di rivando.it (theme-color #0f0e0c)
   Sistema di design unico riusabile da tutti i moduli del Mall.
   ========================================================================== */

:root {
  /* --- Brand / superfici (warm near-black di Rivando) --- */
  --rv-bg:            #0f0e0c;   /* sfondo mall, identico al sito */
  --rv-bg-2:         #16140f;   /* superficie elevata */
  --rv-bg-3:         #1e1b15;   /* card / pannelli */
  --rv-bg-4:         #2a261d;   /* hover / bordo caldo */
  --rv-ink:          #f6f1e7;   /* testo principale (avorio) */
  --rv-ink-soft:     #cdc6b8;   /* testo secondario */
  --rv-ink-mute:     #8d8676;   /* testo terziario / didascalie */
  --rv-line:         rgba(246,241,231,.10);
  --rv-line-strong:  rgba(246,241,231,.20);

  /* --- Accenti (oro champagne = lusso da centro commerciale) --- */
  --rv-gold:         #c8a45c;
  --rv-gold-soft:    #e3c98b;
  --rv-gold-deep:    #9c7c3c;
  --rv-denim:        #4a6c8c;   /* accento moda/denim */
  --rv-denim-soft:   #7fa6c9;

  /* --- Stati semantici --- */
  --rv-ok:           #5cba7d;
  --rv-warn:         #e0a64b;
  --rv-danger:       #d8654f;
  --rv-info:         #5b9bd5;

  /* --- Stati negozio (mappati alla visione) --- */
  --rv-state-open:        #5cba7d;
  --rv-state-soon:        #e0a64b;
  --rv-state-construction:#c98b3c;
  --rv-state-seasonal:    #7c6cd8;
  --rv-state-closed:      #6b6b6b;

  /* --- Tipografia --- */
  --rv-font: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --rv-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --rv-mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;

  /* --- Raggi / ombre / tempi --- */
  --rv-r-sm: 8px;
  --rv-r-md: 14px;
  --rv-r-lg: 22px;
  --rv-r-xl: 32px;
  --rv-shadow-1: 0 2px 10px rgba(0,0,0,.35);
  --rv-shadow-2: 0 14px 50px rgba(0,0,0,.55);
  --rv-shadow-glow: 0 0 40px rgba(200,164,92,.25);
  --rv-ease: cubic-bezier(.22,.61,.36,1);
  --rv-ease-in-out: cubic-bezier(.65,.05,.36,1);
  --rv-dur: .45s;

  /* --- Z-index scale --- */
  --rv-z-scene: 1;
  --rv-z-hud: 50;
  --rv-z-product: 200;
  --rv-z-fitting: 300;
  --rv-z-assistant: 400;
  --rv-z-toast: 600;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--rv-bg);
  color: var(--rv-ink);
  font-family: var(--rv-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--rv-gold); color: #1a1610; }

/* Scrollbar coerente col tema */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rv-bg); }
::-webkit-scrollbar-thumb { background: var(--rv-bg-4); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--rv-gold-deep); }

/* --- Utility riusabili --- */
.rv-eyebrow {
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--rv-gold); font-weight: 600;
}
.rv-serif { font-family: var(--rv-serif); }
.rv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--rv-line-strong);
  font-size: 12px; letter-spacing: .04em;
  background: rgba(0,0,0,.25);
}
.rv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--rv-r-md);
  border: 1px solid var(--rv-gold-deep);
  background: linear-gradient(180deg, var(--rv-gold-soft), var(--rv-gold));
  color: #1a1610; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: transform .2s var(--rv-ease), box-shadow .3s var(--rv-ease), filter .2s;
  font-size: 14px;
}
.rv-btn:hover { transform: translateY(-2px); box-shadow: var(--rv-shadow-glow); filter: brightness(1.05); }
.rv-btn:active { transform: translateY(0); }
.rv-btn--ghost {
  background: transparent; color: var(--rv-ink);
  border: 1px solid var(--rv-line-strong);
}
.rv-btn--ghost:hover { background: rgba(255,255,255,.05); box-shadow: none; }
.rv-btn[disabled] { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }

.rv-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
}