/* ============================================================
   Tema claro/escuro + grade removida
   O site e escuro por padrao; o botao lua/sol alterna para claro.
   ============================================================ */

:root {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f5f7;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e4e7ec;
  --line: #d5dae1;
  --line-soft: #e6e9ee;

  --text: #0d0f12;
  --text-2: #4a515a;
  --text-3: #626a75;

  /* Cores semanticas escuras: legiveis sobre fundo branco */
  --ok: #15803d;
  --warn: #a16207;
  --info: #1d4ed8;
  --ok-soft: rgba(21, 128, 61, 0.14);
  --warn-soft: rgba(161, 98, 7, 0.14);
  --info-soft: rgba(29, 78, 216, 0.14);

  --brand-ink: #ffffff;

  --glass-1: rgba(255, 255, 255, 0.82);
  --glass-2: rgba(255, 255, 255, 0.94);
  --glass-3: rgba(255, 255, 255, 0.72);
  --glass-4: rgba(255, 255, 255, 0.94);
  --scrim: rgba(16, 20, 26, 0.55);

  --sh-sm: 0 1px 2px rgba(16, 20, 26, 0.08);
  --sh-md: 0 8px 24px -10px rgba(16, 20, 26, 0.18);
  --sh-lg: 0 24px 60px -24px rgba(16, 20, 26, 0.24);
  --sh-glow: 0 0 0 1px var(--brand-soft-2), 0 12px 40px -14px rgba(255, 107, 0, 0.5);
}

:root[data-theme="light"] body {
  background: var(--bg);
}

/* ---- Status: variantes legiveis sobre fundo branco ---- */

:root[data-theme="light"] .pill-ok {
  color: #166534;
  background: var(--ok-soft);
}

/* laranja claro nao e legivel sobre branco */
:root[data-theme="light"] .pill-brand {
  color: #9a3412;
  background: rgba(234, 88, 12, 0.13);
  border-color: rgba(234, 88, 12, 0.3);
}

:root[data-theme="light"] .pill-warn {
  color: #a16207;
  background: var(--warn-soft);
}

:root[data-theme="light"] .pill-info {
  color: #1d4ed8;
  background: var(--info-soft);
}

:root[data-theme="light"] .stock-in {
  color: #15803d;
}

:root[data-theme="light"] .stock-low {
  color: #a16207;
}

:root[data-theme="light"] .stock-out,
:root[data-theme="light"] .pill-bad {
  color: #b91c1c;
}

:root[data-theme="light"] .kpi.ok .kpi-ico {
  background: var(--ok-soft);
  color: #15803d;
}

:root[data-theme="light"] .kpi.warn .kpi-ico {
  background: var(--warn-soft);
  color: #a16207;
}

:root[data-theme="light"] .kpi.danger .kpi-ico,
:root[data-theme="light"] .kpi.danger .kpi-val {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}

:root[data-theme="light"] .toast.err svg {
  color: #b91c1c;
}

/* ---- Botao lua/sol ---- */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.theme-toggle:hover {
  color: var(--brand);
  border-color: var(--brand-soft-2);
  background: var(--surface-3);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

.theme-toggle .ico-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .ico-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .ico-sun {
  display: block;
}

.theme-toggle .ico-moon,
.theme-toggle .ico-sun {
  grid-area: 1 / 1;
}

/* Sem animacao de troca para evitar "flash" ao trocar de tema */
:root[data-theme-switch] .theme-toggle svg,
:root[data-theme-switch] body {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}