:root {
  color-scheme: light;
  /* Neutros */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --text-1: #0F172A;
  --text-2: #64748B;
  --text-3: #94A3B8;
  /* Info */
  --info: #1D4ED8;
  --info-bg: #EFF6FF;
  --info-border: #BFDBFE;
  --info-title: #1E3A8A;
  /* Sucesso */
  --success: #15803D;
  --success-bg: #F0FDF4;
  --success-border: #BBF7D0;
  --success-title: #14532D;
  /* Aviso */
  --warning: #B45309;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --warning-title: #78350F;
  /* Erro */
  --danger: #B91C1C;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --danger-title: #7F1D1D;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F172A;
  --surface: #1E293B;
  --border: #334155;
  --text-1: #F1F5F9;
  --text-2: #94A3B8;
  --text-3: #64748B;
  --info: #60A5FA;
  --info-bg: rgba(59, 130, 246, 0.12);
  --info-border: rgba(96, 165, 250, 0.35);
  --info-title: #BFDBFE;
  --success: #4ADE80;
  --success-bg: rgba(34, 197, 94, 0.12);
  --success-border: rgba(74, 222, 128, 0.35);
  --success-title: #BBF7D0;
  --warning: #FBBF24;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(251, 191, 36, 0.35);
  --warning-title: #FDE68A;
  --danger: #F87171;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --danger-border: rgba(248, 113, 113, 0.35);
  --danger-title: #FECACA;
}

/* TAREFA 5 — visibilidade condicional dos ícones do toggle */
[data-theme="dark"] .icon-when-light,
:root:not([data-theme="dark"]) .icon-when-dark { display: none; }

/* TAREFA 7 — transição suave entre temas */
body,
.card, .panel, .tile, .appbar, .tabbar, .alert, .badge, .btn, .field input, #theme-toggle {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .card, .panel, .tile, .appbar, .tabbar, .alert, .badge, .btn, .field input, #theme-toggle { transition: none; }
}