:root{
  /* Superficies: cinza-azulado frio no lugar do bege */
  --bg:#EEF1F6;
  --surface:#FFFFFF;
  --surface-2:#F7F9FC;
  --sidebar:#101725;
  --sidebar-2:#1A2434;

  /* Tinta */
  --ink:#111827;
  --ink-2:#374151;
  --ink-soft:#6B7280;
  --line:#E3E8EF;
  --line-2:#CFD6E0;

  /* Acao: indigo no lugar do amarelo */
  --brand:#4F46E5;
  --brand-ink:#4338CA;
  --brand-soft:#EEF0FE;

  /* Semanticas */
  --loss:#DC2626;
  --loss-bg:#FEF0F0;
  --gain:#059669;
  --gain-bg:#ECFDF5;
  --warn:#D97706;
  --warn-bg:#FFF7ED;

  /* Cores dos tipos de ocorrencia: precisam se distinguir na barra e nos graficos */
  --c-transb:#0EA5E9;
  --c-multa:#F59E0B;

  /* Uma cor por operacao nos graficos do faturamento. Validadas pelo dataviz (claro e escuro,
     todos os pares, daltonismo). O MELI fica no indigo: o amarelo da marca some no fundo claro. */
  --op-amazon:#38BDF8;
  --op-shopee:#F97316;
  --op-meli:#4F46B8;

  /* Fundo de pilula escura (chip, toast): NAO inverte no tema escuro,
     senao vira texto branco sobre fundo branco. */
  --chip-bg:#1F2937;
  --chip-fg:#FFFFFF;

  --radius:12px;
  --shadow:0 1px 2px rgba(16,23,37,.05), 0 4px 14px rgba(16,23,37,.05);
  --shadow-lg:0 8px 30px rgba(16,23,37,.10);
  --side-edge:rgba(0,0,0,.10);
  --sidebar-w:236px;
}

/* ---- Modo escuro: so troca os tokens, os componentes seguem iguais ---- */
html[data-theme="dark"]{
  --bg:#080B12;
  --surface:#151B26;
  --surface-2:#1B2230;
  --sidebar:#141A25;
  --sidebar-2:#1E2634;

  --ink:#E8ECF3;
  --ink-2:#B7C0CE;
  --ink-soft:#8593A6;
  --line:#242C3A;
  --line-2:#323C4D;

  --brand:#6366F1;
  --brand-ink:#818CF8;
  --brand-soft:#1E2340;

  --loss:#F87171;
  --loss-bg:#2A1618;
  --gain:#34D399;
  --gain-bg:#10241D;
  --warn:#FBBF24;
  --warn-bg:#2A2113;

  --c-transb:#38BDF8;
  --c-multa:#FBBF24;

  --op-amazon:#0891B2;
  --op-shopee:#EA580C;
  --op-meli:#6366F1;

  --chip-bg:#2A3444;
  --chip-fg:#F1F5F9;

  --side-edge:rgba(255,255,255,.09);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.30);
  --shadow-lg:0 10px 34px rgba(0,0,0,.45);
}

html{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}

/* A transicao de cor fica no corpo todo: e ela que da o "desvanecer" */
body,.side,.card,.panel,.kpi,.panel-box,.dash-worst,.block,.dblock,
.field input,.field textarea,.search-box input,.tab,.typeopt,.btn-ghost,
.topbar,.plate,.drv-av,.rank-av{
  transition:background-color .9s ease, color .9s ease, border-color .9s ease, box-shadow .9s ease;
}