/* ====== Palette base (default: dark) ====== */
:root {
  --bg:#0b0c0f; --card:#14161a; --border:#22252b; --text:#e7eaf0; --muted:#a8b0bd;
  --accent:#4da3ff; --danger:#ff6b6b;
  --accent-ghost:rgba(255,107,107,0.85); /* stesso colore, 85% opacità */
  --alert-bg: rgba(255,107,107,.16);
  --alert-text: #ffc7c7;
}

/* ====== Temi ====== */
/* DARK (default) */
html[data-theme="dark"] {
  --bg:#0b0c0f; --card:#14161a; --border:#22252b; --text:#e7eaf0; --muted:#a8b0bd;
  --accent:#4da3ff; --danger:#ff6b6b;
  --accent-ghost:rgba(255,107,107,0.85);
  --alert-bg: rgba(255,107,107,.18);
  --alert-text:#ffd6d6;
}

/* SEARCH (Google/Bing) – chiaro */
html[data-theme="search"] {
  --bg:#ffffff; --card:#ffffff; --border:#e2e8f0; --text:#1f2937; --muted:#64748b;
  --accent:#1a73e8; --danger:#ea4335;
  --accent-ghost:rgba(234,67,53,0.85); /* stesso danger ma con 0.85 alfa */
  --alert-bg:#ffebeb; --alert-text:#9b1c1c;
}

/* BRIGHT – contrastato e distinto */
html[data-theme="bright"] {
  --bg:#ffffff; --card:#ffffff; --border:#d1d5db; --text:#111827; --muted:#475569;
  --accent:#6D28D9; --danger:#DC2626;
  --accent-ghost:rgba(220,38,38,0.85);
  --alert-bg:#ffe8e8; --alert-text:#7a1c1c;
}

/* PASTEL – chiaro */
html[data-theme="pastel"] {
  --bg:#fff7fb; --card:#ffffff; --border:#f0d8e8; --text:#2d2333; --muted:#6f5d74;
  --accent:#ff7cc8; --danger:#e2557f;
  --accent-ghost:rgba(226,85,127,0.85);
  --alert-bg:#ffe7ee; --alert-text:#8f213d;
}

/* SAND – chiaro caldo */
html[data-theme="sand"] {
  --bg:#f7f3ea; --card:#fffdf7; --border:#e3d9c9; --text:#2b261e; --muted:#776c5b;
  --accent:#c7a24b; --danger:#b8573b;
  --accent-ghost:rgba(184,87,59,0.85);
  --alert-bg:#ffe7e1; --alert-text:#7f2b20;
}

/* INK – scuro alto contrasto */
html[data-theme="ink"] {
  --bg:#0a0a0a; --card:#101012; --border:#1f232a; --text:#f1f5ff; --muted:#9aa3b2;
  --accent:#8bc4ff; --danger:#ff5d5d;
  --accent-ghost:rgba(255,93,93,0.85);
  --alert-bg: rgba(255,93,93,.18);
  --alert-text:#ffd0d0;
}

/* ====== Base UI ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, Segoe UI, Roboto, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1080px; margin: 0 auto; padding: 24px; }
.narrow { max-width: 720px; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ====== Pulsanti ====== */
.btn {
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}

/* Ghost – stesso tono di danger, ma con trasparenza */
.btn.ghost {
  background: var(--accent-ghost);
  border: 1px solid var(--accent);
  color: #fff;
}

/* Danger – pieno */
.btn.danger {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
}

/* Stati */
.btn:hover,
.btn.ghost:hover,
.btn.danger:hover { filter: brightness(0.92); }
.btn:active { transform: translateY(1px); }

/* ====== Card & griglie ====== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 14px;
  display: grid; gap: 10px;
}

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }

.card-prod {
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.card-prod img { width:100%; height:200px; object-fit:cover; background: var(--border); }
.card-prod .p { padding:12px; }

/* ====== Tabelle ====== */
.table { width:100%; border-collapse:collapse; margin-top:16px; }
.table th, .table td { border-bottom:1px solid var(--border); padding:10px; text-align:left; }

/* ====== Form ====== */
input, textarea, select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
::placeholder { color: var(--muted); }
label, legend { font-weight: 700; }

/* ====== Avvisi ====== */
.alert {
  background: var(--alert-bg);
  border: 1px solid var(--danger);
  color: var(--alert-text);
  padding: 10px;
  border-radius: 10px;
  margin: 8px 0;
}

/* ====== Dettagli ====== */
.price { font-weight: 800; }
.badge {
  display:inline-block;
  background: var(--accent-ghost);
  border:1px solid var(--accent);
  color:#fff;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
}

.hero { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.logo { font-weight:900; font-size:22px; }
.search { flex:1; min-width:240px; }

.footer { opacity:.7; margin-top:24px; font-size:14px; }

/* ====== Accessibilità ====== */
html[data-theme="search"] a,
html[data-theme="bright"] a { text-decoration: underline; text-underline-offset: 2px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}