/* ==========================================================================
   BagInvest — Design tokens
   Identidade: tinta-marinho + dourado/latão + verde-safira (ganho) / coral (perda)
   Tipografia: Fraunces (display) + Inter (UI) + IBM Plex Mono (valores)
   ========================================================================== */

:root {
  /* ---- Tipografia ---- */
  --fonte-display: 'Fraunces', 'Georgia', serif;
  --fonte-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* ---- Espaçamento ---- */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;

  /* ---- Raios e sombras ---- */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 20px;
  --raio-pill: 999px;

  /* ---- Transições ---- */
  --transicao-rapida: 150ms ease;
  --transicao-normal: 250ms cubic-bezier(0.22, 1, 0.36, 1);
  --transicao-lenta: 500ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Largura do sidebar ---- */
  --largura-sidebar: 248px;
}

/* ==========================================================================
   Tema escuro (padrão)
   ========================================================================== */
:root,
[data-tema="dark"] {
  --cor-fundo: #0B1420;
  --cor-fundo-elevado: #101C2C;
  --cor-fundo-elevado-2: #17263B;
  --cor-fundo-hover: #1C2C44;
  --cor-borda: #223047;
  --cor-borda-forte: #2E4162;

  --cor-texto: #F2EFE9;
  --cor-texto-secundario: #93A1B8;
  --cor-texto-terciario: #5D6C85;

  --cor-marca: #D4A853;
  --cor-marca-forte: #E8C578;
  --cor-marca-fraca: rgba(212, 168, 83, 0.14);

  --cor-positiva: #3ED9A3;
  --cor-positiva-fraca: rgba(62, 217, 163, 0.14);
  --cor-negativa: #E5654F;
  --cor-negativa-fraca: rgba(229, 101, 79, 0.14);
  --cor-info: #6FA8DC;

  --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --sombra-elevada: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  --sombra-marca: 0 8px 24px -8px rgba(212, 168, 83, 0.35);

  --vidro-fundo: rgba(16, 28, 44, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Tema claro
   ========================================================================== */
[data-tema="light"] {
  --cor-fundo: #F3F5F7;
  --cor-fundo-elevado: #FFFFFF;
  --cor-fundo-elevado-2: #EBEEF2;
  --cor-fundo-hover: #E4E8ED;
  --cor-borda: #DDE3EA;
  --cor-borda-forte: #C7D0DB;

  --cor-texto: #16202F;
  --cor-texto-secundario: #52627A;
  --cor-texto-terciario: #8493A8;

  --cor-marca: #B5872F;
  --cor-marca-forte: #93701F;
  --cor-marca-fraca: rgba(181, 135, 47, 0.12);

  --cor-positiva: #1E9E71;
  --cor-positiva-fraca: rgba(30, 158, 113, 0.12);
  --cor-negativa: #C6432E;
  --cor-negativa-fraca: rgba(198, 67, 46, 0.12);
  --cor-info: #3A79B8;

  --sombra-card: 0 1px 2px rgba(22, 32, 47, 0.06), 0 8px 24px -10px rgba(22, 32, 47, 0.12);
  --sombra-elevada: 0 4px 12px rgba(22, 32, 47, 0.08), 0 16px 48px -16px rgba(22, 32, 47, 0.18);
  --sombra-marca: 0 8px 24px -10px rgba(181, 135, 47, 0.3);

  --vidro-fundo: rgba(255, 255, 255, 0.78);
  --vidro-borda: rgba(22, 32, 47, 0.06);
}

/* Respeita preferência do sistema por menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao-rapida: 0ms;
    --transicao-normal: 0ms;
    --transicao-lenta: 0ms;
  }
}