/* =====================================================================
   TOKENS — decisões de design em variáveis. Nenhum seletor de componente aqui.
   As cores da marca vêm de marca.css (camada substituível pelo design system Ócule).
   ===================================================================== */
:root {
  color-scheme: light;

  /* Superfícies */
  --fundo: #f4f3f0;            /* tela */
  --fundo-lateral: #ffffff;    /* menu lateral / barras */
  --superficie: #ffffff;       /* painéis */
  --superficie-2: #f6f5f3;     /* realces dentro de painéis */

  /* Texto */
  --texto: #1b1b1d;
  --texto-2: #5c5b58;
  --texto-3: #85837e;

  /* Linhas */
  --borda: #e6e4e0;
  --borda-forte: #cfccc6;

  /* Ação */
  --primaria: var(--marca-primaria);
  --primaria-texto: var(--marca-primaria-texto);
  --tinta: #1b1b1d;            /* seleção (filtros, abas ativas) */
  --tinta-texto: #ffffff;

  /* Estados (reservados: nunca usados como cor de série) */
  --ok: #18794e;    --ok-fundo: #e8f5ee;
  --aviso: #8a5a00; --aviso-fundo: #fff5dc;
  --erro: #c4231c;  --erro-fundo: #fdeceb;

  /* Dados: paleta categórica validada (ordem fixa; a cor segue a loja) */
  --viz-1: #e75025; --viz-2: #2a78d6; --viz-3: #1baf7a; --viz-4: #6250d6; --viz-outros: #a3a19c;
  --viz-grade: #ecebe8; --viz-eixo: #85837e;

  /* Tipografia */
  --fonte: "Figtree", var(--marca-fonte);
  --fs-2xs: .7rem;  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem;
  --fs-lg: 1.15rem; --fs-xl: 1.35rem; --fs-2xl: 1.5rem; --fs-hero: clamp(2.15rem, 4.5vw, 3.25rem);

  /* Espaçamento (escala de 4px) */
  --esp-1: .25rem; --esp-2: .5rem; --esp-3: .75rem; --esp-4: 1rem; --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-8: 2rem;

  /* Forma */
  --raio-sm: 6px; --raio: 8px; --raio-painel: 12px; --raio-pilula: 99px;

  /* Estrutura */
  --lateral-largura: 232px;
  --abas-altura: 64px;
  --gutter: 16px;
  --toque-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #121214; --fundo-lateral: #19191c; --superficie: #1c1d20; --superficie-2: #25262a;
    --texto: #ededeb; --texto-2: #b4b2ad; --texto-3: #8d8b86;
    --borda: #2e2f33; --borda-forte: #44454a;
    --tinta: #ededeb; --tinta-texto: #161618;
    --ok: #5fd39a; --ok-fundo: #15301f; --aviso: #f0c062; --aviso-fundo: #33290f; --erro: #ff8a80; --erro-fundo: #3a1c1a;
    --viz-1: #e75025; --viz-2: #3987e5; --viz-3: #199e70; --viz-4: #9085e9; --viz-outros: #77756f;
    --viz-grade: #2a2b2f; --viz-eixo: #8d8b86;
  }
}

@media (max-width: 899px) {
  :root { --raio-painel: 14px; }
}