/* ============================================================
   ErosBot — Design System (identità originale, da zero)
   ------------------------------------------------------------
   Concept: "inchiostro & brace" — notte profonda, calore rose-gold.
   Palette distintiva (NIENTE rosa/viola generico):
     ink      #14101a  sfondo quasi-nero violaceo
     ember    #ff6b5e  corallo acceso (accento primario)
     rosegold #f4b6a0  oro rosato (accento secondario)
     sand     #e8d5c4  testo caldo chiaro
   Tipografia: system/Inter, titoli con gradiente corallo->oro.
   Icone: SVG lineari (no emoji), stroke caldo.
   ============================================================ */

:root {
  --ink-0: #0f0c14;
  --ink-1: #14101a;
  --ink-2: #1b1522;
  --ink-3: #241b2e;
  --line: rgba(244, 182, 160, 0.14);
  --line-strong: rgba(255, 107, 94, 0.38);
  --txt: #f3e9e2;
  --muted: #b9a3b0;
  --faint: #7d6a78;
  --ember: #ff6b5e;
  --rosegold: #f4b6a0;
  --sand: #e8d5c4;
  --grad: linear-gradient(120deg, #ff6b5e 0%, #f4b6a0 100%);
  --grad-soft: linear-gradient(120deg, rgba(255,107,94,.16), rgba(244,182,160,.14));
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #fb7185;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  --glow: 0 4px 22px rgba(255, 107, 94, 0.30);
  --font: -apple-system, 'Segoe UI', Inter, Roboto, sans-serif;
}

.eros-ic { display: inline-block; vertical-align: middle; flex: none; }

/* ---- Bottoni ---- */
.eros-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: #2a0f0c; border: none;
  border-radius: var(--r-sm); padding: 10px 16px;
  font: 700 13.5px var(--font); cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s;
}
.eros-btn:hover { transform: translateY(-1px); box-shadow: var(--glow); filter: brightness(1.05); }
.eros-btn:active { transform: translateY(0); }
.eros-btn--ghost { background: var(--ink-3); border: 1px solid var(--line); color: var(--txt); font-weight: 600; }
.eros-btn--ghost:hover { background: #2c2136; box-shadow: none; }
.eros-btn--sm { padding: 7px 11px; font-size: 12px; border-radius: 8px; }

/* ---- Card ---- */
.eros-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.eros-card--glass { background: linear-gradient(160deg, rgba(27,21,34,.94), rgba(15,12,20,.94)); backdrop-filter: blur(8px); }

/* ---- Input ---- */
.eros-input, .eros-select, .eros-textarea {
  width: 100%; background: var(--ink-0); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font: 400 13px var(--font);
  transition: border-color .12s, box-shadow .12s;
}
.eros-input:focus, .eros-select:focus, .eros-textarea:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 107, 94, 0.16);
}
.eros-input::placeholder, .eros-textarea::placeholder { color: var(--faint); }
.eros-label { display: block; font: 700 10.5px var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }

/* ---- Pill / badge ---- */
.eros-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--font); padding: 3px 10px; border-radius: 20px; }
.eros-pill--ok { background: rgba(74,222,128,.13); color: var(--ok); }
.eros-pill--warn { background: rgba(251,191,36,.13); color: var(--warn); }
.eros-pill--err { background: rgba(251,113,133,.13); color: var(--err); }
.eros-pill--brand { background: var(--grad-soft); color: var(--rosegold); border: 1px solid var(--line); }

/* ---- Titolo con gradiente ---- */
.eros-title-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Logo mark (E monogramma) ---- */
.eros-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-1); border: 1px solid var(--line-strong);
  color: transparent; border-radius: 10px; box-shadow: var(--glow);
}
.eros-mark svg { display: block; }