/* ============================================================
   THEME · WHITE-LABEL PANTONE
   ------------------------------------------------------------
   Questo è l'UNICO file che devi sostituire per ri-brandare
   lo shop per un nuovo negozio. Cambia qui i colori, il
   font-family e il border-radius e l'intero template si
   adegua automaticamente.
   ------------------------------------------------------------
   Esempio di brand alternativo (commenta sopra, decommenta qui):
     --brand-primary:       #0A5FD8;   // blu
     --brand-primary-dark:  #0742A0;
     --brand-primary-light: #E4EEFC;
   ============================================================ */

:root{
  /* ---- PALETTE PRIMARIA (pantone del negozio) -------------- */
  --brand-primary:        #ED7B28;   /* Ricamby orange */
  --brand-primary-dark:   #C96620;
  --brand-primary-light:  #FDF0E5;
  --brand-primary-rgb:    237, 123, 40;

  /* Alias retro-compatibili usati in tutto il codice esistente.
     Puntano al token primario: NON modificare i valori qui,
     modifica solo --brand-primary sopra.                        */
  --brand-orange:         var(--brand-primary);
  --brand-orange-dark:    var(--brand-primary-dark);
  --brand-orange-light:   var(--brand-primary-light);

  /* ---- SCALA GRIGI / NEUTRI -------------------------------- */
  --ink:      #111827;   /* titoli */
  --ink-2:    #374151;   /* testo secondario */
  --ink-3:    #6B7280;   /* muted */
  --line:     #E5E7EB;   /* bordi */
  --line-2:   #F3F4F6;   /* separatori soft */
  --bg:       #F9FAFB;   /* background app */
  --surface:  #FFFFFF;   /* card / superfici */

  /* ---- COLORI SEMANTICI ------------------------------------ */
  --state-success:        #22A06B;
  --state-success-bg:     #E7F6EE;
  --state-warning:        #B98400;
  --state-warning-bg:     #FFF4D6;
  --state-danger:         #D23B2C;
  --state-danger-bg:      #FDECEA;
  --state-info:           #2563EB;
  --state-info-bg:        #E0ECFF;

  /* ---- TIPOGRAFIA ------------------------------------------ */
  --font-family-base: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-size-base:   16px;

  /* ---- RAGGI ----------------------------------------------- */
  --radius-sm: .5rem;
  --radius:    .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* ---- OMBRE ----------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow:    0 4px 14px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  /* ---- OVERRIDE BOOTSTRAP (non toccare) -------------------- */
  --bs-primary:           var(--brand-primary);
  --bs-primary-rgb:       var(--brand-primary-rgb);
  --bs-body-font-family:  var(--font-family-base);
  --bs-body-font-size:    var(--font-size-base);
  --bs-border-radius:     var(--radius);
  --bs-border-radius-sm:  var(--radius-sm);
  --bs-border-radius-lg:  var(--radius-lg);
  --bs-border-radius-xl:  var(--radius-xl);
}

/* ============================================================
   Bootstrap helpers coerenti con il brand
   ============================================================ */
.btn-primary{
  background-color: var(--brand-primary);
  border-color:     var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background-color: var(--brand-primary-dark) !important;
  border-color:     var(--brand-primary-dark) !important;
}
.btn-outline-primary{
  color:        var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline-primary:hover{
  background-color: var(--brand-primary);
  border-color:     var(--brand-primary);
  color: #fff;
}
.text-primary{ color: var(--brand-primary) !important; }
.bg-primary  { background-color: var(--brand-primary) !important; }
.border-primary{ border-color: var(--brand-primary) !important; }

a{ color: var(--brand-primary); }
a:hover{ color: var(--brand-primary-dark); }

/* Focus ring coerente al brand */
:where(button, .btn, a, input, select, textarea):focus-visible{
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}