/*
  Gazafi Crypto Guard — tokens de tema.

  Direção do documento 10: sóbrio, organizado, densidade controlada. Nada de
  estética de cassino, foguetes, confete por trade ou número piscando. As cores
  de resultado são dessaturadas de propósito: um dia positivo não deve parecer
  uma comemoração, e um dia negativo não deve parecer um alarme de incêndio.

  Regra de acessibilidade que este arquivo assume: **informação crítica nunca
  depende só de cor**. Todo estado que usa cor carrega também texto ou ícone.

  Tema: claro é o padrão em :root; escuro entra por prefers-color-scheme e é
  forçado por [data-tema="escuro"] / [data-tema="claro"], nessa ordem, para que
  o seletor manual vença nos dois sentidos.
*/

:root {
  /* --- superfícies */
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #eceff4;
  --superficie-3: #e2e7ee;
  --borda: #d5dce5;
  --borda-forte: #b9c4d1;

  /* --- texto */
  --texto: #141b26;
  --texto-suave: #4a5867;
  --texto-fraco: #6b7a8c;
  --texto-invertido: #f7f9fc;

  /* --- acento: dourado sóbrio, o capital protegido da marca */
  --acento: #8a6a24;
  --acento-forte: #6f5419;
  --acento-suave: #f0e6d0;
  --acento-borda: #d9c48c;

  /* --- estados financeiros (dessaturados) */
  --positivo: #1d6f52;
  --positivo-suave: #e2f0ea;
  --negativo: #9c3f3b;
  --negativo-suave: #f6e5e4;
  --atencao: #8a6420;
  --atencao-suave: #f7ecd8;
  --info: #2d5b8e;
  --info-suave: #e5edf7;
  --neutro: #5b6773;
  --neutro-suave: #eaeef3;

  /* --- foco e sombra */
  --foco: #2d5b8e;
  --sombra-1: 0 1px 2px rgb(20 27 38 / 0.06), 0 1px 3px rgb(20 27 38 / 0.04);
  --sombra-2: 0 2px 6px rgb(20 27 38 / 0.08), 0 6px 16px rgb(20 27 38 / 0.06);

  /* --- tipografia */
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;
  --fonte-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-numero: 1.625rem;

  /* --- espaçamento e forma */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;

  --raio-sm: 4px;
  --raio: 8px;
  --raio-lg: 12px;

  --largura-maxima: 1320px;
  --altura-topo: 56px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0b0f16;
    --superficie: #131a24;
    --superficie-2: #19212d;
    --superficie-3: #202a38;
    --borda: #26313f;
    --borda-forte: #37475b;

    --texto: #e8ecf3;
    --texto-suave: #9aa8ba;
    --texto-fraco: #6f7f92;
    --texto-invertido: #0b0f16;

    --acento: #c4a052;
    --acento-forte: #d8b768;
    --acento-suave: #241d0f;
    --acento-borda: #4d3f1e;

    --positivo: #4fa383;
    --positivo-suave: #10241d;
    --negativo: #c9706a;
    --negativo-suave: #2a1614;
    --atencao: #cca059;
    --atencao-suave: #251c0e;
    --info: #6c9bd0;
    --info-suave: #101a26;
    --neutro: #8493a4;
    --neutro-suave: #171f2a;

    --foco: #6c9bd0;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-2: 0 2px 8px rgb(0 0 0 / 0.45), 0 8px 24px rgb(0 0 0 / 0.35);

    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --fundo: #0b0f16;
  --superficie: #131a24;
  --superficie-2: #19212d;
  --superficie-3: #202a38;
  --borda: #26313f;
  --borda-forte: #37475b;

  --texto: #e8ecf3;
  --texto-suave: #9aa8ba;
  --texto-fraco: #6f7f92;
  --texto-invertido: #0b0f16;

  --acento: #c4a052;
  --acento-forte: #d8b768;
  --acento-suave: #241d0f;
  --acento-borda: #4d3f1e;

  --positivo: #4fa383;
  --positivo-suave: #10241d;
  --negativo: #c9706a;
  --negativo-suave: #2a1614;
  --atencao: #cca059;
  --atencao-suave: #251c0e;
  --info: #6c9bd0;
  --info-suave: #101a26;
  --neutro: #8493a4;
  --neutro-suave: #171f2a;

  --foco: #6c9bd0;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 2px 8px rgb(0 0 0 / 0.45), 0 8px 24px rgb(0 0 0 / 0.35);

  color-scheme: dark;
}

/* --------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/*
  Valores financeiros: tabulares, para que as casas decimais fiquem alinhadas
  em colunas e a leitura de uma tabela de saldos seja imediata.
*/
.numero,
td.numero,
.valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

:where(a) {
  color: var(--info);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/*
  Atualização de dados não pode mover um botão de confirmação sob o cursor
  (documento 10). Áreas que recebem dados vivos reservam altura própria.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}