/*
 * Tokens, reset e elementos base.
 *
 * Propshaft serve cada .css deste diretório como um <link> próprio, em ordem
 * alfabética (`stylesheet_link_tag :app`). Em vez de depender dessa ordem,
 * a cascata é declarada uma única vez aqui com @layer: qualquer arquivo novo
 * entra na camada certa independentemente do nome.
 */
@layer base, componentes, telas, impressao;

:root {
  /* superfície */
  --cor-fundo:      #eef0f3;
  --cor-papel:      #ffffff;
  --cor-papel-alt:  #fafbfc;
  --cor-linha:      #e2e6ea;
  --cor-linha-suave:#eef1f4;

  /* texto */
  --cor-texto:      #171a1c;
  --cor-texto-2:    #5b6470;
  --cor-texto-3:    #7a848d;

  /* ação e semântica */
  --cor-acao:       #0f5b8a;
  --cor-acao-forte: #0b4467;
  --cor-sucesso:    #10693f;
  --cor-sucesso-bg: #e7f3ec;
  --cor-sucesso-ln: #c6e3d2;
  --cor-atencao:    #9a5b00;
  --cor-atencao-bg: #fdf3e0;
  --cor-atencao-ln: #f0dcb8;
  --cor-erro:       #b3261e;
  --cor-erro-forte: #8c1d17;
  --cor-erro-bg:    #fdecea;
  --cor-erro-ln:    #f0c5bf;
  --cor-info-bg:    #e9f1f7;
  --cor-info-ln:    #cfe0ec;
  --cor-info-fg:    #0b4467;

  /* barra lateral escura */
  --cor-barra:      #14181b;
  --cor-barra-alt:  #1d2327;
  --cor-barra-ativo:#22282d;
  --cor-barra-linha:#262c31;
  --cor-barra-texto:#c2cbd3;
  --cor-barra-fraco:#8b969f;
  /* Portal do comprador: a barra é azul-escura, a identidade da área do
     cliente, e não o grafite do sistema interno. */
  --cor-portal-barra: #10294d;
  --cor-portal-alt:   #173563;
  --cor-portal-ativo: #1f5fd1;

  /* campos */
  --cor-campo-linha:#d5dae0;
  --cor-campo-linha-suave: #dfe3e8;

  /* tipografia */
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: Consolas, "SF Mono", Menlo, monospace;
  --t-11: 11px; --t-12: 12.5px; --t-13: 13.5px;
  --t-16: 16px; --t-19: 19px; --t-26: 26px;
  --peso-normal: 400; --peso-medio: 600; --peso-forte: 700;

  /* espaço, raio, sombra */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 56px;
  --r-1: 5px;  --r-2: 6px;  --r-3: 8px;  --r-4: 10px; --r-pill: 999px;
  --borda: 1px;
  --sombra-1: 0 1px 2px rgb(20 24 27 / .04);
  --sombra-2: 0 3px 10px rgb(20 24 27 / .08);

  /* densidade da tabela (troque num só lugar) */
  --linha-altura: 8px;

  /* foco: um anel só, usado por todo campo e todo botão */
  --anel-foco: 0 0 0 3px color-mix(in oklch, var(--cor-acao) 16%, transparent);
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte);
    font-size: 14px;
    line-height: 1.5;
    /* A tabela é o produto: dígito de largura fixa alinha coluna de dinheiro
       sem precisar de fonte monoespaçada. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-forte); letter-spacing: -.01em; }
  h1 { font-size: var(--t-19); }
  h2 { font-size: 14px; }
  p  { margin: 0; }
  ul, ol { margin: 0; padding: 0; }

  a { color: var(--cor-acao); text-decoration: none; }
  a:hover { color: var(--cor-acao-forte); text-decoration: underline; }

  input, select, textarea, button { font-family: inherit; font-size: inherit; }
  ::placeholder { color: #9aa4ae; }

  :focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }

  hr { border: none; border-top: var(--borda) solid var(--cor-linha); margin: var(--e-4) 0; }

  code, pre { font-family: var(--fonte-mono); }

  [hidden] { display: none !important; }
}