/* Design system — tokens.
   Toda cor, espaço, raio e sombra do sistema sai daqui. Os componentes em
   app.css nunca usam valores soltos, só estas variáveis. */

:root {
  color-scheme: light;

  /* Superfícies e texto */
  --cor-fundo: #f5f4f0;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #faf9f6;
  --cor-borda: #e4e1d9;
  --cor-borda-forte: #cdc9be;
  --cor-texto: #1d2a2c;
  --cor-texto-2: #5d6b6e;

  /* Marca */
  --cor-primaria: #0e6b63;
  --cor-primaria-forte: #0a524c;
  --cor-primaria-suave: #dff3ef;
  --cor-sobre-primaria: #ffffff;
  --cor-destaque: #c8873a;

  /* Menu lateral */
  --lateral-fundo: #10272b;
  --lateral-texto: #b9cacb;
  --lateral-titulo: #7d9395;
  --lateral-realce: rgba(255, 255, 255, 0.08);
  --lateral-ativo: #ffffff;

  /* Estados: fundo suave + texto */
  --info-fundo: #e0eafc;
  --info-texto: #1e4fbf;
  --ok-fundo: #dcf5e4;
  --ok-texto: #17663a;
  --neutro-fundo: #e9e7e1;
  --neutro-texto: #525b5c;
  --alerta-fundo: #fcefcf;
  --alerta-texto: #8a5206;
  --perigo-fundo: #fde4e1;
  --perigo-texto: #b3261e;

  /* Espaços (base 4px) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* Forma */
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 14px;
  --sombra-1: 0 1px 2px rgba(16, 39, 43, 0.06);
  --sombra-2: 0 4px 16px rgba(16, 39, 43, 0.1);

  /* Tipografia */
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --texto-pp: 0.75rem;
  --texto-p: 0.8125rem;
  --texto-m: 0.9375rem;
  --texto-g: 1.125rem;
  --texto-gg: 1.5rem;
  --texto-numero: 1.875rem;

  --largura-lateral: 232px;
  --altura-barra: 54px;
}

:root[data-tema="escuro"] {
  color-scheme: dark;

  --cor-fundo: #0f1719;
  --cor-superficie: #172225;
  --cor-superficie-2: #1c2a2d;
  --cor-borda: #2a3a3d;
  --cor-borda-forte: #3d5154;
  --cor-texto: #e6eceb;
  --cor-texto-2: #9aaaab;

  --cor-primaria: #2bb3a3;
  --cor-primaria-forte: #49cbbb;
  --cor-primaria-suave: #143b38;
  --cor-sobre-primaria: #06201d;
  --cor-destaque: #e0a45c;

  --lateral-fundo: #0a1214;
  --lateral-texto: #a9babb;
  --lateral-titulo: #6b8082;

  --info-fundo: #16284d;
  --info-texto: #9bb8ff;
  --ok-fundo: #123a23;
  --ok-texto: #7fdc9f;
  --neutro-fundo: #26312f;
  --neutro-texto: #aab6b5;
  --alerta-fundo: #3f2e0a;
  --alerta-texto: #f2c56b;
  --perigo-fundo: #4a1a17;
  --perigo-texto: #ff9d94;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 6px 20px rgba(0, 0, 0, 0.5);
}