/* ============================================================================
   BACKSTAGE — bs-theme.css
   Design system "Mix A+B": A = Spotlight (luce di palco), B = Console (LED/meter).
   Questo file e' la SPEC vivente: token (CSS custom properties) + classi riusabili.

   USO:
     <link rel="stylesheet" href="/assets/css/bs-theme.css">  (mettere DOPO i font)
   Le pagine possono allineare le proprie :root locali ai token qui sotto.

   REGOLE:
   - Nessun asset esterno nuovo. Font (Inter / Fraunces / JetBrains Mono) gia' caricati.
   - Non toccare la CSP. Tutto e' same-origin, niente @import remoti.
   - Contrasto testo >= AA: fg su bg, accent su scuro, testo scuro su bottoni oro.
   - Classi prefissate .bs-* per non collidere col markup esistente.
   ========================================================================== */

/* ───────────────────────────── 1. TOKEN ──────────────────────────────────
   Definiti su :root cosi' valgono ovunque il file e' incluso. */
:root {
  /* — Background: 4 livelli di profondita' (dal piu' scuro al piu' alto) — */
  --bs-bg:        #0a0a0b;   /* fondo pagina */
  --bs-bg-elev:   #121214;   /* pannelli, barre */
  --bs-bg-card:   #16161a;   /* card / superfici */
  --bs-bg-input:  #1c1c20;   /* input, chip, pozzi */

  /* — Foreground: 3 livelli — */
  --bs-fg:        #f5f5f7;   /* testo primario */
  --bs-fg-dim:    #9a9aa0;   /* testo secondario */
  --bs-fg-faint:  #5a5a60;   /* testo terziario / placeholder */

  /* — Oro (accent) + varianti — */
  --bs-gold:        #e8b661;            /* accent base */
  --bs-gold-hi:     #f0c47a;            /* highlight gradiente bottone */
  --bs-gold-lo:     #dca64b;            /* shadow gradiente bottone */
  --bs-gold-soft:   rgba(232,182,97,0.15);   /* fill soffuso (bg attivo) */
  --bs-gold-faint:  rgba(232,182,97,0.06);   /* fill appena percettibile */
  --bs-gold-line:   rgba(232,182,97,0.45);   /* bordo oro soffuso */
  --bs-gold-glow:   rgba(232,182,97,0.55);   /* alone luminoso */
  --bs-on-gold:     #0a0a0b;            /* testo su superfici oro (scuro, AA) */

  /* — Bordi — */
  --bs-border:        rgba(255,255,255,0.08);
  --bs-border-strong: rgba(255,255,255,0.16);

  /* — Stato / semantica — */
  --bs-danger:      #ff6b6b;
  --bs-danger-soft: rgba(255,107,107,0.10);
  --bs-danger-line: rgba(255,107,107,0.28);
  --bs-success:     #5ee0a0;
  --bs-success-soft:rgba(94,224,160,0.10);
  --bs-success-line:rgba(94,224,160,0.30);
  --bs-teal:        #6cc1b4;   /* gia' in uso nel prodotto */

  /* — LED Console (per la vista tecnico/editor — token condivisi) — */
  --bs-led-ok:   #5ee0a0;   /* verde acceso */
  --bs-led-warn: #e8b661;   /* oro = attenzione */
  --bs-led-err:  #ff6b6b;   /* coral = errore */
  --bs-led-off:  #33363b;   /* spento */
  --bs-led-info: #6cc1b4;   /* teal = info/attivo */

  /* — Gradienti — */
  /* Spotlight: ellisse calda dall'alto, simula la luce di un faro di palco. */
  --bs-spotlight: radial-gradient(120% 80% at 50% -20%,
                    rgba(232,182,97,0.14) 0%,
                    rgba(232,182,97,0.05) 32%,
                    rgba(232,182,97,0.00) 64%);
  /* Superficie card: micro-gradiente bianco per dare "vetro". */
  --bs-surface: linear-gradient(160deg,
                  rgba(255,255,255,0.05) 0%,
                  rgba(255,255,255,0.015) 48%,
                  rgba(255,255,255,0.00) 100%);
  /* Bottone oro primario. */
  --bs-grad-gold: linear-gradient(180deg, var(--bs-gold-hi) 0%, var(--bs-gold-lo) 100%);

  /* — Ombre: 3 livelli stratificati + glow oro — */
  --bs-shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.35);
  --bs-shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 10px 28px rgba(0,0,0,.55);
  --bs-shadow-3: 0 8px 18px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.60);
  --bs-glow-gold: 0 0 0 1px var(--bs-gold-line), 0 6px 20px rgba(232,182,97,0.28);

  /* — Raggi — */
  --bs-r-xs: 5px;
  --bs-r-sm: 8px;
  --bs-r-md: 12px;
  --bs-r-lg: 16px;
  --bs-r-pill: 999px;

  /* — Timing / easing — */
  --bs-ease: cubic-bezier(.2,.7,.2,1);
  --bs-t-fast: 150ms;
  --bs-t-base: 200ms;
  --bs-t-slow: 320ms;

  /* — Type — */
  --bs-font-sans:  'Inter', system-ui, sans-serif;
  --bs-font-serif: 'Fraunces', serif;
  --bs-font-mono:  'JetBrains Mono', monospace;
}

/* ──────────────────────── 2. UTILITY DI BASE ─────────────────────────────── */

/* Scrollbar scure custom (WebKit + Firefox). Applicabili globalmente. */
.bs-scroll, .bs-card, .bs-modal-body { scrollbar-width: thin; scrollbar-color: var(--bs-border-strong) transparent; }
.bs-scroll::-webkit-scrollbar, .bs-card::-webkit-scrollbar { width: 10px; height: 10px; }
.bs-scroll::-webkit-scrollbar-track, .bs-card::-webkit-scrollbar-track { background: transparent; }
.bs-scroll::-webkit-scrollbar-thumb, .bs-card::-webkit-scrollbar-thumb {
  background: var(--bs-border-strong); border-radius: var(--bs-r-pill);
  border: 2px solid transparent; background-clip: padding-box;
}
.bs-scroll::-webkit-scrollbar-thumb:hover, .bs-card::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gold-line); background-clip: padding-box;
}

/* Focus ring oro coerente (usare su elementi interattivi custom). */
.bs-focusable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bs-bg), 0 0 0 4px var(--bs-gold-line);
}

/* ──────────────────────── 3. SPOTLIGHT (header A) ────────────────────────── */
/* Header / barra con luce di palco. Mettere .bs-spotlight sul contenitore in testa.
   ::before crea l'ellisse calda, non intercetta i click. */
.bs-spotlight { position: relative; isolation: isolate; }
.bs-spotlight::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bs-spotlight); pointer-events: none;
}

/* ──────────────────────────── 4. CARD (vetro) ────────────────────────────── */
.bs-card {
  background-color: var(--bs-bg-card);
  background-image: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-r-md);
  box-shadow: var(--bs-shadow-2);
  transition: transform var(--bs-t-base) var(--bs-ease),
              box-shadow var(--bs-t-base) var(--bs-ease),
              border-color var(--bs-t-base) var(--bs-ease);
}
.bs-card.is-interactive { cursor: pointer; }
.bs-card.is-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-shadow-3);
  border-color: var(--bs-border-strong);
}
.bs-card.is-active {
  border-color: var(--bs-gold-line);
  box-shadow: var(--bs-glow-gold);
}

/* ──────────────────────────── 5. BOTTONI ────────────────────────────────── */
/* Base: secondario / outline. */
.bs-btn {
  font-family: var(--bs-font-sans);
  font-size: 13px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--bs-r-sm);
  background: transparent; color: var(--bs-fg-dim);
  border: 1px solid var(--bs-border-strong); cursor: pointer;
  transition: transform var(--bs-t-fast) var(--bs-ease),
              box-shadow var(--bs-t-fast) var(--bs-ease),
              color var(--bs-t-fast) var(--bs-ease),
              border-color var(--bs-t-fast) var(--bs-ease),
              background var(--bs-t-fast) var(--bs-ease);
}
.bs-btn:hover { color: var(--bs-gold); border-color: var(--bs-gold-line); transform: translateY(-1px); }
.bs-btn:active { transform: translateY(0); }
.bs-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bs-bg), 0 0 0 4px var(--bs-gold-line); }
.bs-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Primario: gradiente oro, testo scuro, glow morbido al hover. */
.bs-btn-primary {
  background: var(--bs-grad-gold);
  color: var(--bs-on-gold); font-weight: 600;
  border: 1px solid var(--bs-gold-lo);
  box-shadow: var(--bs-shadow-1);
}
.bs-btn-primary:hover {
  color: var(--bs-on-gold);
  border-color: var(--bs-gold-hi);
  transform: translateY(-1px);
  box-shadow: var(--bs-shadow-2), 0 0 22px rgba(232,182,97,0.30);
}
.bs-btn-primary:active { transform: translateY(0); }
.bs-btn-primary:disabled { opacity: .5; box-shadow: none; transform: none; }

/* ───────────────────────────── 6. BADGE (pill) ──────────────────────────── */
.bs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bs-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: var(--bs-r-pill);
  background: var(--bs-bg-input); color: var(--bs-fg-dim);
  border: 1px solid var(--bs-border);
}
.bs-badge.is-gold    { background: var(--bs-gold-soft);    color: var(--bs-gold);    border-color: var(--bs-gold-line); }
.bs-badge.is-ok      { background: var(--bs-success-soft); color: var(--bs-success); border-color: var(--bs-success-line); }
.bs-badge.is-warn    { background: var(--bs-gold-soft);    color: var(--bs-gold);    border-color: var(--bs-gold-line); }
.bs-badge.is-err     { background: var(--bs-danger-soft);  color: var(--bs-danger);  border-color: var(--bs-danger-line); }
.bs-badge.is-info    { background: rgba(108,193,180,0.12); color: var(--bs-teal);    border-color: rgba(108,193,180,0.30); }

/* ───────────────────────────── 7. LED (Console B) ───────────────────────── */
/* Pallino di stato con alone. Variante = colore + glow. */
.bs-led {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bs-led-off); box-shadow: 0 0 0 0 transparent;
  flex-shrink: 0; vertical-align: middle;
  transition: box-shadow var(--bs-t-base) var(--bs-ease), background var(--bs-t-base) var(--bs-ease);
}
.bs-led.is-ok   { background: var(--bs-led-ok);   box-shadow: 0 0 8px 1px rgba(94,224,160,0.55); }
.bs-led.is-warn { background: var(--bs-led-warn); box-shadow: 0 0 8px 1px rgba(232,182,97,0.55); }
.bs-led.is-err  { background: var(--bs-led-err);  box-shadow: 0 0 8px 1px rgba(255,107,107,0.55); }
.bs-led.is-info { background: var(--bs-led-info); box-shadow: 0 0 8px 1px rgba(108,193,180,0.50); }
.bs-led.is-off  { background: var(--bs-led-off);  box-shadow: none; }
.bs-led.is-pulse { animation: bs-led-pulse 1.6s var(--bs-ease) infinite; }

@keyframes bs-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ───────────────────────────── 8. METER (VU) ────────────────────────────── */
/* Barretta segmentata stile VU. Markup: .bs-meter > .bs-meter-seg * N.
   Aggiungi .is-on ai segmenti accesi; .is-peak per l'ultimo acceso. */
.bs-meter { display: inline-flex; gap: 3px; align-items: flex-end; height: 16px; }
.bs-meter-seg {
  width: 4px; height: 100%; border-radius: 1px;
  background: var(--bs-led-off); opacity: 0.5;
  transition: background var(--bs-t-fast) var(--bs-ease), opacity var(--bs-t-fast) var(--bs-ease);
}
.bs-meter-seg.is-on   { background: var(--bs-led-ok);   opacity: 1; }
.bs-meter-seg.is-warn { background: var(--bs-led-warn); opacity: 1; }
.bs-meter-seg.is-peak { background: var(--bs-led-err);  opacity: 1; }
/* Variante "barra continua" stile progress. */
.bs-meter-bar { height: 6px; width: 100%; border-radius: var(--bs-r-pill); background: var(--bs-bg-input); overflow: hidden; }
.bs-meter-bar > i { display: block; height: 100%; background: var(--bs-grad-gold); border-radius: inherit; transition: width var(--bs-t-slow) var(--bs-ease); }

/* ───────────────────────────── 9. INPUT ─────────────────────────────────── */
.bs-input {
  background: var(--bs-bg-input);
  border: 1px solid var(--bs-border-strong);
  border-radius: var(--bs-r-sm);
  padding: 10px 12px; color: var(--bs-fg);
  font-family: var(--bs-font-sans); font-size: 14px; outline: none;
  transition: border-color var(--bs-t-fast) var(--bs-ease), box-shadow var(--bs-t-fast) var(--bs-ease);
}
.bs-input::placeholder { color: var(--bs-fg-faint); }
.bs-input:focus {
  border-color: var(--bs-gold-line);
  box-shadow: 0 0 0 3px var(--bs-gold-faint);
}

/* ───────────────────────────── 10. MODALE ───────────────────────────────── */
.bs-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,6,8,0.62);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bs-modal {
  background-color: var(--bs-bg-elev);
  background-image: var(--bs-surface);
  border: 1px solid var(--bs-border-strong);
  border-radius: var(--bs-r-lg);
  box-shadow: var(--bs-shadow-3);
  max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
  animation: bs-rise var(--bs-t-base) var(--bs-ease) both;
}

/* ───────────────────────── 11. KEYFRAMES INGRESSO ───────────────────────── */
@keyframes bs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bs-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bs-enter      { animation: bs-rise var(--bs-t-base) var(--bs-ease) both; }
.bs-enter-fade { animation: bs-fade var(--bs-t-base) var(--bs-ease) both; }

/* Rispetta chi preferisce meno movimento. */
@media (prefers-reduced-motion: reduce) {
  .bs-card, .bs-btn, .bs-btn-primary, .bs-led, .bs-meter-seg,
  .bs-modal, .bs-enter, .bs-enter-fade, .bs-meter-bar > i { transition: none; animation: none; }
  .bs-led.is-pulse { animation: none; }
}