@layer reset, tokens, base, componentes, layout;

/*
 * Interface 2.0 (§6.1–§6.3 do plano da Interface 2.0).
 * Este arquivo é a única fonte de cor, tipografia, espaço, raio, sombra e
 * movimento. Nenhum hex fora daqui.
 */

:root {
  color-scheme: light;

  /* §6.1 — cor (tema claro). Valores fechados na F12.S0/P-14. */
  --cor-fundo: #F6F6F4;
  --cor-superficie: #FFFFFF;
  --cor-superficie-alta: #F1F2EF;
  --cor-borda: #E4E5E0;
  --cor-texto: #16181A;
  --cor-texto-suave: #5F6B7A;
  --cor-primaria: #125E6C;
  --cor-primaria-suave: #E9F2F3;
  --cor-sucesso: #14722F;
  --cor-aviso: #A64B08;
  --cor-erro: #B42318;

  /* Derivados 2.0: superfícies, texto sobre a primária e fundos de estado. */
  --cor-superficie-elevada: #F1F2EF;
  --cor-borda-forte: #C9CCC5;
  --cor-primaria-texto: #FFFFFF;
  --cor-sucesso-suave: #E7F4EA;
  --cor-aviso-suave: #FBF0E4;
  --cor-aviso-texto: #8F3F06;
  --cor-aviso-borda: #D8A46A;
  --cor-erro-suave: #FBEAE8;
  --cor-erro-texto: #9B1C13;
  --cor-observacao: #8A4B00;
  --cor-observacao-suave: #FFF0D9;
  --cor-observacao-texto: #7A4200;
  --cor-selecao: #DCEAEC;
  --cor-backdrop: rgba(15, 17, 19, 0.42);

  /* Paleta decorativa e estável das Impressões (1..8). */
  --cor-impressao-1: #125E6C;
  --cor-impressao-2: #A64B08;
  --cor-impressao-3: #6B3FA0;
  --cor-impressao-4: #B42318;
  --cor-impressao-5: #1D6B47;
  --cor-impressao-6: #8A5A00;
  --cor-impressao-7: #9A3412;
  --cor-impressao-8: #4D7C0F;

  /* §6.2 — tipografia: família local e escala fechada (12, 13, 15, 20, 28). */
  --fonte-sistema: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --fonte-12: 12px;
  --fonte-13: 13px;
  --fonte-15: 15px;
  --fonte-20: 20px;
  --fonte-28: 28px;
  --peso-400: 400;
  --peso-500: 500;
  --peso-600: 600;
  --linha-titulo: 1.25;
  --linha-compacta: 1.25;
  --linha-normal: 1.5;
  --linha-ampla: 1.6;

  /* §6.3 — espaço na base 4px. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;

  /* Espaçamento 1.0 ainda usado pelos componentes legados: sweep na F12.S6. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-7: 28px;
  --esp-8: 32px;
  --esp-9: 36px;
  --esp-10: 40px;

  /* §6.3 — forma, elevação, movimento e alvo. */
  --raio-controle: 8px;
  --raio-card: 12px;
  --raio-painel: 16px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --sombra-1: 0 1px 2px rgba(22, 24, 26, 0.08);
  --sombra-2: 0 14px 36px rgba(15, 17, 19, 0.22);
  --alvo-minimo: 40px;
  --anel-foco: 2px solid var(--cor-primaria);
  --transicao-rapida: 150ms ease;
  --transicao-overlay: 200ms ease;
}

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

  --cor-fundo: #0F1113;
  --cor-superficie: #171A1D;
  --cor-superficie-alta: #1E2226;
  --cor-borda: #2A2F35;
  --cor-texto: #F2F3F5;
  --cor-texto-suave: #A7ADB7;
  --cor-primaria: #4AA7B8;
  --cor-primaria-suave: #10282D;
  --cor-sucesso: #4ADE80;
  --cor-aviso: #FBBF24;
  --cor-erro: #F87171;

  --cor-superficie-elevada: #1E2226;
  --cor-borda-forte: #3A4149;
  --cor-primaria-texto: #06202A;
  --cor-sucesso-suave: #10291A;
  --cor-aviso-suave: #2E2410;
  --cor-aviso-texto: #FBBF24;
  --cor-aviso-borda: #7A5A1C;
  --cor-erro-suave: #331A18;
  --cor-erro-texto: #F87171;
  --cor-observacao: #FBBF24;
  --cor-observacao-suave: #2E2410;
  --cor-observacao-texto: #FBBF24;
  --cor-selecao: #1E3A44;
  --cor-backdrop: rgba(0, 0, 0, 0.58);

  --cor-impressao-1: #4AA7B8;
  --cor-impressao-2: #FBBF24;
  --cor-impressao-3: #C9A7FF;
  --cor-impressao-4: #F87171;
  --cor-impressao-5: #6EE7A8;
  --cor-impressao-6: #F2C66D;
  --cor-impressao-7: #FFB27F;
  --cor-impressao-8: #C3E07F;
}

@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    color-scheme: dark;

    --cor-fundo: #0F1113;
    --cor-superficie: #171A1D;
    --cor-superficie-alta: #1E2226;
    --cor-borda: #2A2F35;
    --cor-texto: #F2F3F5;
    --cor-texto-suave: #A7ADB7;
    --cor-primaria: #4AA7B8;
    --cor-primaria-suave: #10282D;
    --cor-sucesso: #4ADE80;
    --cor-aviso: #FBBF24;
    --cor-erro: #F87171;

    --cor-superficie-elevada: #1E2226;
    --cor-borda-forte: #3A4149;
    --cor-primaria-texto: #06202A;
    --cor-sucesso-suave: #10291A;
    --cor-aviso-suave: #2E2410;
    --cor-aviso-texto: #FBBF24;
    --cor-aviso-borda: #7A5A1C;
    --cor-erro-suave: #331A18;
    --cor-erro-texto: #F87171;
    --cor-observacao: #FBBF24;
    --cor-observacao-suave: #2E2410;
    --cor-observacao-texto: #FBBF24;
    --cor-selecao: #1E3A44;
    --cor-backdrop: rgba(0, 0, 0, 0.58);

    --cor-impressao-1: #4AA7B8;
    --cor-impressao-2: #FBBF24;
    --cor-impressao-3: #C9A7FF;
    --cor-impressao-4: #F87171;
    --cor-impressao-5: #6EE7A8;
    --cor-impressao-6: #F2C66D;
    --cor-impressao-7: #FFB27F;
    --cor-impressao-8: #C3E07F;
  }
}