/* ==========================================================================
   TOKENS — paleta, escalas e reset
   Carregado antes de styles.css. Todo valor de cor do app sai daqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paleta. Este é o único bloco que um tema alternativo precisaria redeclarar:
   as regras adiante só falam em nome semântico, nunca em hex. Um
   [data-theme="dark"] futuro é um bloco de valores, não um refactor.
   -------------------------------------------------------------------------- */
:root {
  --bg:           #F7F8FA;
  --surface:      #FFFFFF;

  --ink:          #171A2E;   /* texto principal; painel do login; card de saldo mobile */
  --muted:        #565B73;   /* texto secundário */
  --faint:        #9096AC;   /* labels, hints */

  --line:         #E4E6EF;   /* bordas 1px */
  --line-soft:    #F1F2F8;   /* divisores internos, trilhas de barra */

  --accent:       #3B4CC0;   /* cobalto */
  --accent-hover: #2A38A0;
  --accent-soft:  #EDEFFB;   /* item ativo, badge azul */
  --accent-mid:   #6B7BD6;   /* séries secundárias de gráfico */
  --accent-light: #9AA5E3;
  --accent-pale:  #C9CEE8;

  --green:        #1B7A4B;
  --green-soft:   #E6F4EC;
  --red:          #B3382F;
  --red-soft:     #FBECEA;
  --amber:        #9A6A0B;
  --amber-soft:   #FAF3E0;
  --amber-border: #EFE2BC;

  --font-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-sans:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* O desenho não pede uma mono própria; a da máquina serve para código de
     convite e para o texto colado no importador, sem uma terceira webfont. */
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-card:  14px;
  --r-ctl:    8px;   /* inputs e botões */
  --r-modal: 16px;
  --r-pill:  999px;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;

  /* Sombra é rara neste desenho — só o card do login e o FAB do mobile. */
  --shadow-card: 0 12px 40px rgba(23,26,46,0.08);
  --shadow-fab:  0 6px 16px rgba(59,76,192,0.4);
  --shadow-pill: 0 1px 3px rgba(23,26,46,0.10);
}

/* --------------------------------------------------------------------------
   Ponte para os nomes antigos.

   Existem ~440 atributos style="" espalhados por index.html e pelos template
   strings de app.js, api.js e fiscal.js, e quase todos falam em var(--text3),
   var(--bg3) e afins. Apontar os nomes antigos para a paleta nova retinge tudo
   isso de uma vez, sem tocar em marcação — inclusive fiscal.js, que reescreve
   a própria seção inteira por innerHTML.

   Os nomes daqui estão em depreciação: código novo usa os semânticos acima.
   Este bloco sai quando o último style="" legado tiver sido varrido.
   -------------------------------------------------------------------------- */
:root {
  --bg2:      var(--surface);
  --bg3:      var(--line-soft);
  --bg4:      var(--accent-soft);
  --surface2: var(--line-soft);

  --border:   var(--line);
  --border2:  var(--line);

  --accent2:  var(--accent-mid);
  --accent3:  var(--green);
  --accent4:  var(--amber);
  --danger:   var(--red);
  --gold:     var(--amber);
  --gold2:    var(--amber);

  --text:     var(--ink);
  --text2:    var(--muted);
  --text3:    var(--faint);

  --r:  var(--r-card);
  --r2: var(--r-modal);
  --r3: 20px;
}

/* --------------------------------------------------------------------------
   Reset e base
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Valor monetário nunca deve "dançar" ao atualizar: dígito de largura fixa. */
.num, .card-value, .tx-amount, .data-table td, .inv-price,
input[type="number"] { font-variant-numeric: tabular-nums; }

/* Títulos de página e valores grandes são a voz serifada do desenho. */
.serif, .page-title, .card-value, .section-title { font-family: var(--font-serif); }

/* --------------------------------------------------------------------------
   Ícones

   Um sprite <symbol> inline no index.html, consumido por <use href="#i-*">.
   Escolhido em vez de um registro em JS porque os ícones são necessários tanto
   no HTML estático (nav, topbar, abas do mobile) quanto dentro de template
   strings de app.js e fiscal.js — o sprite serve os dois sem depender de JS ter
   rodado. Arquivo .svg externo não serve: <use> apontando para outro arquivo
   esbarra no CSP.

   currentColor aqui é o que faz o estado ativo da nav funcionar sem uma regra
   por ícone: basta mudar a cor do texto e o traço acompanha.
   -------------------------------------------------------------------------- */
.ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-lg { width: 20px; height: 20px; }
.ico-xl { width: 24px; height: 24px; }

::selection { background: var(--accent-soft); color: var(--ink); }

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