/* =====================================================================
   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;

  /* Cores: apelidos dos tokens do design system Ócule (ds-tokens.css). As telas antigas herdam a paleta nova e o tema
     escuro por aqui; tela migrada usa os oc- direto. */
  --fundo: var(--oc-fundo);
  --fundo-lateral: var(--oc-superficie);
  --superficie: var(--oc-superficie);
  --superficie-2: var(--oc-superficie-2);
  --texto: var(--oc-texto);
  --texto-2: var(--oc-texto-2);
  --texto-3: var(--oc-texto-3);
  --borda: var(--oc-linha);
  --borda-forte: var(--oc-linha-controle);
  --primaria: var(--oc-acao);
  --primaria-texto: var(--oc-sobre-acao);
  --tinta: var(--oc-tinta);
  --tinta-texto: var(--oc-sobre-tinta);

  /* Estados (reservados: nunca usados como cor de série) */
  --ok: var(--oc-sucesso);    --ok-fundo: var(--oc-sucesso-suave);
  --ok-meta: #10603c; /* --ok mais escuro, para texto pequeno sobre os fundos das metas (AA em M1, M2 e M3) */
  --aviso: var(--oc-alerta);  --aviso-fundo: var(--oc-alerta-suave);
  --erro: var(--oc-perigo);   --erro-fundo: var(--oc-perigo-suave);

  /* Metas, paleta "Crescimento": M1 verde-limão, M2 verde, M3 esmeralda profundo. Não são estados (distintas do --ok).
     -N: barra, marcas e linhas · -N-fundo: realce suave (texto --texto, AA) · -N-sobre: texto sobre o preenchimento -N (AA) */
  --meta-1: #82bd2e; --meta-1-fundo: #e6f2d5; --meta-1-sobre: #1b1b1d;
  --meta-1-linha: #7d8c10;     /* M1 em linha fina de gráfico: o lima tem 2,3:1 no branco; este tem 3,7:1 */
  --meta-2: #46a626; --meta-2-fundo: #daedd4; --meta-2-sobre: #1b1b1d;
  --meta-3: #04574a; --meta-3-fundo: #cddddb; --meta-3-sobre: #ffffff;

  /* Dados: paleta categórica validada (ordem fixa; a cor segue a loja) */
  --viz-1: var(--oc-viz-1); --viz-2: var(--oc-viz-2); --viz-3: var(--oc-viz-3); --viz-4: var(--oc-viz-4); --viz-outros: var(--oc-viz-outros);
  --viz-grade: var(--oc-linha); --viz-eixo: var(--oc-texto-3);

  /* Tipografia */
  --fonte: var(--font-sans, "Onest"), var(--marca-fonte);  /* Onest, do design system (ds-tokens.css) */
  --fonte-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --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: var(--oc-raio-xs); --raio: var(--oc-raio-sm); --raio-painel: var(--oc-raio-md); --raio-pilula: var(--oc-raio-pilula);

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

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ok-meta: #5fd39a;
    --meta-1: #c5ea5e; --meta-1-fundo: #353c29; --meta-1-sobre: #161618; --meta-1-linha: #c5ea5e;
    --meta-2: #6fd13b; --meta-2-fundo: #283824; --meta-2-sobre: #161618;
    --meta-3: #12a58c; --meta-3-fundo: #1a3130; --meta-3-sobre: #161618;
  }
}