/* =====================================================================
   Painel Carlos - LaVi Solucoes
   Tokens de tema e botoes.

   Paleta definida pelo cliente. Os valores do bloco PALETA nao sao
   escolha de implementacao: nao troque sem falar com ele.

   Sem gradiente, sem sombra, sem animacao decorativa. Nao ha uma unica
   regra de transition neste arquivo, e e de proposito.
   ===================================================================== */

:root {
  /* ---- PALETA (definida pelo cliente) ---------------------------- */

  /* Superficies, do fundo para cima. */
  --fundo:            #0D0D0F;
  --card:             #17181C;
  --elevado:          #1F2126;

  /* Duas forcas de linha, com trabalhos diferentes:
     --borda    delimita algo que o usuario opera - campo, card, botao.
     --divisoria so separa assunto dentro de um bloco - linha de tabela,
                 regua sob titulo de secao. Nunca contorna um controle. */
  --borda:            #33373F;
  --divisoria:        #2A2D34;

  /* Texto. */
  --texto:            #F2F2F3;
  --texto-secundario: #9A9CA3;

  /* Ouro: cor de marca e de acao. */
  --ouro:             #D4AF37;
  --ouro-hover:       #E8C65A;
  --borda-ouro:       #7F6A22;
  --sobre-ouro:       #1A1508;

  /* Estado.
     O alerta e LARANJA, nunca amarelo: amarelo brigaria com o ouro e o
     usuario deixaria de saber se a cor quer dizer "acao" ou "atencao". */
  --sucesso:          #3FB950;
  --alerta:           #E8833A;
  --erro:             #F85149;

  /* ---- APOIO (decisoes de implementacao, discutiveis) ------------ */

  /* Fio claro no topo do botao primario: e a luz batendo no bevel de
     uma tecla fisica. E o unico gesto de volume do tema inteiro -
     nada mais aqui finge ter profundidade. */
  --ouro-topo:        #F0DC8C;

  /* Derivadas para estado desabilitado e superficie de campo. */
  --desabilitado-fundo:  #1F2126;
  --desabilitado-texto:  #6A6C73;
  --desabilitado-borda:  var(--divisoria);

  /* Tipografia.
     Pilha do sistema: o painel e servido como estatico pelo nginx e nao
     tem build. Puxar webfont custaria dependencia externa e latencia no
     celular do Carlos. Se quiser uma fonte propria depois, e trocar aqui.

     tabular-nums e a decisao que mais importa: esta tela e uma coluna de
     dinheiro atras da outra, e digito de largura variavel desalinha
     R$ 1.250,00 embaixo de R$ 980,00. */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --texto-xs:   0.75rem;   /* 12px - rotulo de tabela, legenda        */
  --texto-sm:   0.8125rem; /* 13px - texto de apoio, celula densa     */
  --texto-base: 0.9375rem; /* 15px - corpo, campo de formulario       */
  --texto-md:   1.0625rem; /* 17px - titulo de card                   */
  --texto-lg:   1.375rem;  /* 22px - titulo de tela                   */
  --texto-xl:   1.875rem;  /* 30px - numero grande do dashboard       */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;

  --altura-densa:  1.3;   /* tabela, numero              */
  --altura-corpo:  1.55;  /* paragrafo, descricao        */

  /* Espacamento, base 4px. */
  --e1:  0.25rem;
  --e2:  0.5rem;
  --e3:  0.75rem;
  --e4:  1rem;
  --e5:  1.5rem;
  --e6:  2rem;
  --e7:  3rem;

  /* Raio por funcao, nao um valor unico para tudo:
     controle e mais fechado que container, tag e quase reta. */
  --raio-tag:       3px;
  --raio-controle:  4px;
  --raio-card:      6px;

  /* Alvo de toque minimo. O Carlos usa isso em obra, as vezes de luva. */
  --alvo-toque: 44px;
}

/* Faz o navegador desenhar barra de rolagem, seletor de data e
   autofill no escuro. Sem isto, o formulario nasce com peca branca. */
:root {
  color-scheme: dark;
  accent-color: var(--ouro);
}

/* =====================================================================
   BASE
   ===================================================================== */

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: var(--altura-corpo);
  -webkit-text-size-adjust: 100%;
}

/* Todo numero do painel alinha na virgula. */
table,
.numero,
.dinheiro { font-variant-numeric: tabular-nums; }

/* Foco visivel e acessibilidade, nao enfeite: quem navega por teclado
   precisa ver onde esta. Fica mesmo com a regra de "sem animacao". */
:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

/* =====================================================================
   BOTOES
   ===================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);

  min-height: var(--alvo-toque);
  padding: var(--e2) var(--e5);

  font-family: inherit;
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: none;
  cursor: pointer;
}

/* --- Primario: fundo ouro, texto escuro, fio claro no topo. --- */
.botao-primario {
  background: var(--ouro);
  color: var(--sobre-ouro);
  border-color: var(--ouro);
  border-top-color: var(--ouro-topo);
}

.botao-primario:hover {
  background: var(--ouro-hover);
  border-color: var(--ouro-hover);
  border-top-color: var(--ouro-topo);
}

/* Pressionado: o fio do topo some. A tecla afundou, a luz nao bate mais. */
.botao-primario:active { border-top-color: var(--ouro); }

/* --- Secundario: so contorno. --- */
.botao-secundario {
  background: transparent;
  color: var(--ouro);
  border-color: var(--borda-ouro);
}

.botao-secundario:hover {
  color: var(--ouro-hover);
  border-color: var(--ouro);
}

.botao-secundario:active { background: var(--elevado); }

/* --- Destrutivo: excluir produto, cancelar orcamento. --- */
.botao-perigo {
  background: transparent;
  color: var(--erro);
  border-color: var(--erro);
}

.botao-perigo:hover {
  background: var(--erro);
  color: var(--fundo);
}

/* --- Desabilitado: vale para os tres. --- */
.botao:disabled,
.botao[aria-disabled="true"] {
  background: var(--desabilitado-fundo);
  color: var(--desabilitado-texto);
  border-color: var(--desabilitado-borda);
  cursor: not-allowed;
}