/* ── orion-ui · tema.css ────────────────────────────────────────────────
   Tokens de cor, fonte e medida, iguais em todos os apps. A cor de MARCA
   (--marca-*) não mora aqui: cada app define a sua em
   /assets/marca/marca.css, linkado DEPOIS deste arquivo. Os valores abaixo
   são só um padrão neutro para uma página sem marca não ficar sem cor.

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

:root {
  color-scheme: light;

  /* Superfícies e texto (neutros, iguais em todos os apps) */
  --fundo:          #f5f5f4;
  --superficie:     #ffffff;
  --superficie-2:   #fafaf9;
  --superficie-3:   #f0efed;
  --borda:          rgba(24, 24, 27, 0.12);
  --borda-2:        rgba(24, 24, 27, 0.07);
  --texto:          #18181b;
  --texto-2:        #3f3f46;
  --texto-suave:    #6b6b73;
  --texto-fraco:    #9a9aa2;

  /* Estados (iguais em todos os apps) */
  --sucesso:        #0f7a52;
  --sucesso-suave:  rgba(15, 122, 82, 0.09);
  --sucesso-borda:  rgba(15, 122, 82, 0.26);
  --sucesso-texto:  #0b5e3f;
  --perigo:         #c62828;
  --perigo-suave:   rgba(198, 40, 40, 0.07);
  --perigo-borda:   rgba(198, 40, 40, 0.22);
  --perigo-texto:   #8e1b1b;
  --perigo-sobre:   #ffffff;
  --alerta:         #b7791f;
  --alerta-suave:   rgba(183, 121, 31, 0.09);
  --alerta-borda:   rgba(183, 121, 31, 0.26);
  --alerta-texto:   #7c5210;

  --sombra-p:       0 1px 3px rgba(24, 24, 27, 0.07);
  --sombra:         0 4px 14px rgba(24, 24, 27, 0.09);
  --sombra-painel:  -12px 0 40px rgba(24, 24, 27, 0.16);
  --veu:            rgba(24, 24, 27, 0.45);
  --topo-fundo:     rgba(255, 255, 255, 0.86);

  /* Marca: padrão neutro (cada app sobrescreve em marca.css) */
  --marca-acao:           #3f3f46;   /* fundo de botão primário, aba ativa */
  --marca-acao-forte:     #27272a;   /* hover do botão primário */
  --marca-acao-sobre:     #ffffff;   /* texto em cima de --marca-acao */
  --marca-acao-texto:     #3f3f46;   /* link e texto de ação sobre o fundo */
  --marca-acao-suave:     rgba(63, 63, 70, 0.08);
  --marca-acao-borda:     rgba(63, 63, 70, 0.24);
  --marca-destaque:       #71717a;   /* identidade: faixa, risco do h1, marcador */
  --marca-destaque-texto: #52525b;   /* rótulo de seção */
  --marca-faixa:          var(--marca-destaque);

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

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

  --fundo:          #0e0e10;
  --superficie:     #18181b;
  --superficie-2:   #1f1f23;
  --superficie-3:   #27272b;
  --borda:          #303036;
  --borda-2:        #232328;
  --texto:          #ececee;
  --texto-2:        #c4c4ca;
  --texto-suave:    #9a9aa3;
  --texto-fraco:    #6f6f78;

  --sucesso:        #3ecf8e;
  --sucesso-suave:  rgba(62, 207, 142, 0.12);
  --sucesso-borda:  rgba(62, 207, 142, 0.3);
  --sucesso-texto:  #7ee2b5;
  --perigo:         #f87171;
  --perigo-suave:   rgba(248, 113, 113, 0.12);
  --perigo-borda:   rgba(248, 113, 113, 0.3);
  --perigo-texto:   #fca5a5;
  --perigo-sobre:   #18181b;
  --alerta:         #f0b429;
  --alerta-suave:   rgba(240, 180, 41, 0.12);
  --alerta-borda:   rgba(240, 180, 41, 0.3);
  --alerta-texto:   #f7cf6b;

  --sombra-p:       0 1px 3px rgba(0, 0, 0, 0.35);
  --sombra:         0 8px 24px rgba(0, 0, 0, 0.45);
  --sombra-painel:  -12px 0 40px rgba(0, 0, 0, 0.55);
  --veu:            rgba(0, 0, 0, 0.6);
  --topo-fundo:     rgba(14, 14, 16, 0.88);

  --marca-acao:           #d4d4d8;
  --marca-acao-forte:     #e4e4e7;
  --marca-acao-sobre:     #18181b;
  --marca-acao-texto:     #d4d4d8;
  --marca-acao-suave:     rgba(212, 212, 216, 0.1);
  --marca-acao-borda:     rgba(212, 212, 216, 0.28);
  --marca-destaque:       #a1a1aa;
  --marca-destaque-texto: #c4c4ca;
}