/* Palette base (chiaro) */
:root{
  --bg: #f2f2f2;
  --text: #333333;
  --muted: #667085;
  --primary: #4a90e2;

  --card-bg: #ffffffdd;
  --card-border: #e5e7eb;

  --chip-bg: #f1f4f9;
  --chip-text: #445;
}

/* Palette scura (quando html[data-theme="dark"]) */
html[data-theme="dark"]{
  color-scheme: dark; /* aiuta input/native UI */
  --bg: #0b1220;
  --text: #e8edf7;
  --muted: #9aa7c7;
  --primary: #8ab6ff;

  --card-bg: #121a2b;
  --card-border: #1f2a44;

  --chip-bg: #17233a;
  --chip-text: #c7d2e6;
}

/* Regole generiche: cominci subito a vedere l’effetto */
html, body{
  background: var(--bg);
  color: var(--text);
}

/* Link coerenti con il tema */
a{ color: var(--primary); }

/* Alcuni contenitori frequenti nel tuo sito */
main.dashboard,
.profile-box,
.lc-card{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
}

/* Pill/contatori nelle card commenti */
.lc-stats .pill{
  background: var(--chip-bg) !important;
  color: var(--chip-text) !important;
}

/* Divider/linee sottili */
hr, .section-divider{ border-color: var(--card-border) !important; }

/* Transizione piacevole (facoltativa) */
html, body, main.dashboard, .profile-box, .lc-card{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}