/* ── orion-ui · tema.css ────────────────────────────────────────────────
   Fonte, cores neutras, estados e medidas: iguais em todos os apps e
   copiados do Orion (referência: assets/components/orion-theme.css do
   orion-dev). A cor de MARCA (--marca-*) não mora aqui: cada app define a
   sua em /assets/marca/marca.css, linkado DEPOIS deste arquivo. Sem
   marca.css a página fica com o verde do Orion.

   Regra: nenhum CSS de app usa hex. Tudo aponta para um destes tokens.
   ─────────────────────────────────────────────────────────────────────── */

@import url('fontes.css');

/* ── Claro ──────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Superfícies e texto (Orion: --orion-bg … --orion-muted2) */
  --fundo:          #f0f2f5;
  --fundo-2:        #e8eaed;   /* campo de login, trilho, fundo rebaixado */
  --superficie:     #ffffff;
  --superficie-2:   #f7f8fa;
  --superficie-3:   #eef0f3;
  --borda:          rgba(0, 0, 0, 0.09);
  --borda-2:        rgba(0, 0, 0, 0.05);
  --texto:          #111827;
  --texto-2:        #374151;
  --texto-suave:    #6b7280;
  --texto-fraco:    #9ca3af;

  /* Estados (Orion: green / red / gold) */
  --sucesso:        #059669;
  --sucesso-suave:  rgba(5, 150, 105, 0.1);
  --sucesso-borda:  rgba(5, 150, 105, 0.22);
  --sucesso-texto:  #065f46;
  --perigo:         #dc2626;
  --perigo-suave:   rgba(220, 38, 38, 0.07);
  --perigo-borda:   rgba(220, 38, 38, 0.2);
  --perigo-texto:   #991b1b;
  --perigo-sobre:   #ffffff;
  --alerta:         #d97706;
  --alerta-suave:   rgba(217, 119, 6, 0.08);
  --alerta-borda:   rgba(217, 119, 6, 0.22);
  --alerta-texto:   #92400e;

  --sombra-p:       0 1px 3px rgba(0, 0, 0, 0.06);
  --sombra:         0 4px 12px rgba(0, 0, 0, 0.07);
  --sombra-painel:  -12px 0 40px rgba(0, 0, 0, 0.16);
  --veu:            rgba(7, 10, 20, 0.55);
  --topo-fundo:     rgba(255, 255, 255, 0.82);

  /* Marca: padrão = verde do Orion (cada app sobrescreve em marca.css) */
  --marca-acao:           #059669;   /* botão primário, aba ativa, foco */
  --marca-acao-forte:     #047857;   /* hover do botão primário */
  --marca-acao-sobre:     #ffffff;   /* texto em cima de --marca-acao */
  --marca-acao-texto:     #065f46;   /* link, rótulo e texto de ação */
  --marca-acao-suave:     rgba(5, 150, 105, 0.08);   /* fundo de ícone/selo, brilho do login */
  --marca-acao-borda:     rgba(5, 150, 105, 0.22);   /* borda de ícone/selo, anel de foco */

  /* Fonte e medida */
  --fonte:          'Space Grotesk', system-ui, sans-serif;
  --fonte-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --raio:           8px;
  --raio-g:         12px;
  --topo-altura:    56px;
  --painel-largura:       480px;
  --painel-largura-larga: 720px;
  --transicao:      0.2s ease;
}

/* ── Escuro ─────────────────────────────────────────────────────────────── */

:root.dark,
:root[data-theme="dark"] {
  color-scheme: dark;

  --fundo:          #0a0a0c;
  --fundo-2:        #111114;
  --superficie:     #272727;
  --superficie-2:   #2e2e2e;
  --superficie-3:   #363636;
  --borda:          #3a3a3a;
  --borda-2:        #2b2b2b;
  --texto:          #e8e8ea;
  --texto-2:        #c4c4cb;
  --texto-suave:    #9a9aa4;
  --texto-fraco:    #75757f;

  --sucesso:        #34d399;
  --sucesso-suave:  rgba(52, 211, 153, 0.12);
  --sucesso-borda:  #1d3a33;
  --sucesso-texto:  #34d399;
  --perigo:         #f87171;
  --perigo-suave:   rgba(248, 113, 113, 0.12);
  --perigo-borda:   rgba(248, 113, 113, 0.3);
  --perigo-texto:   #f87171;
  --perigo-sobre:   #0a0a0c;
  --alerta:         #fbbf24;
  --alerta-suave:   rgba(251, 191, 36, 0.12);
  --alerta-borda:   rgba(251, 191, 36, 0.3);
  --alerta-texto:   #fbbf24;

  --sombra-p:       0 1px 3px rgba(0, 0, 0, 0.3);
  --sombra:         0 8px 24px rgba(0, 0, 0, 0.4);
  --sombra-painel:  -12px 0 40px rgba(0, 0, 0, 0.55);
  --veu:            rgba(0, 0, 0, 0.7);
  --topo-fundo:     rgba(10, 10, 12, 0.86);

  --marca-acao:           #34d399;
  --marca-acao-forte:     #6ee7b7;
  --marca-acao-sobre:     #0a0a0c;
  --marca-acao-texto:     #34d399;
  --marca-acao-suave:     rgba(52, 211, 153, 0.12);
  --marca-acao-borda:     rgba(52, 211, 153, 0.3);
}