/* ==========================================================================
   DESIGN TOKENS • MyFinances
   Camadas: primitivo (fonte/raio/sombra) → semântico (cor de estado).
   Cores de tema (bg/text/border/accent) continuam em style.css, que já
   estrutura :root (dark, padrão) + body.light-theme (override).
   ========================================================================== */

/* ---------- Tipografia: Inter Variable, self-hosted (sem CDN externo) ---------- */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-var-latin.65850a373e25.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-var-latin-ext.01ba6c2a184b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Raio — escala única usada em botões, inputs, cards e modais */
  --radius-xs:   5px;
  --radius-sm:   7px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* Sombra — profundidade sutil (fundo escuro reflete pouca luz, opacidade baixa) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.24);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 12px 32px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.42);

  /* Cores de estado — únicas em todo o app (substituem os verdes/vermelhos
     divergentes que existiam entre CSS vars e estilos inline) */
  --color-positive:       #22c55e;
  --color-positive-hover: #16a34a;
  --color-negative:       #ef4444;
  --color-negative-hover: #dc2626;
  --color-info:           #3b82f6;
  --color-indigo:         #6366f1;
  --color-purple:         #a855f7;
  --color-amber:          #f59e0b;
  --color-cyan:           #06b6d4;

  --focus-ring-color: rgba(34, 197, 94, .38);
}

body.light-theme {
  --focus-ring-color: rgba(21, 128, 61, .32);
}

/* Fonte da aplicação inteira */
body {
  font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Números financeiros com dígitos de largura fixa — alinhamento correto em
   tabelas e comparação visual rápida entre valores */
.stat-value, .tabela-dados td, .form-control, input, select {
  font-variant-numeric: tabular-nums;
}

/* Foco de teclado visível e consistente em todo elemento interativo */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  border-radius: var(--radius-xs);
}