/* ============================================================
   Design Tokens — Machado de Ouro
   Identidade: Verde-esmeralda + Ouro (estética fintech)
   Tema claro padrão + escuro opcional ([data-theme="dark"])
   ============================================================ */

:root {
  /* Cores — marca */
  --color-primary: #0F3D2E;   /* verde-esmeralda (confiança/base) */
  --color-primary-700: #0A2C20;
  --color-growth: #16A34A;    /* verde dinheiro (números positivos/crescimento) */
  --color-growth-700: #15803D;
  --color-accent: #C9A227;    /* OURO (CTA/destaque/marca) */
  --color-accent-700: #9C7D17; /* ouro escuro p/ texto sobre fundo claro */

  --color-text: #14271E;
  --color-muted: #5A6B62;
  --color-bg: #F7F8F6;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF1ED;
  --color-border: #E1E6E1;
  --color-danger: #DC2626;

  /* Tipografia */
  --font-head: 'Poppins', system-ui, sans-serif;  /* títulos */
  --font-body: 'Inter', system-ui, sans-serif;    /* corpo e NÚMEROS (algarismos tabulares) */

  /* Escala / raios / sombra */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px rgba(15, 61, 46, .10);
  --shadow-sm: 0 2px 8px rgba(15, 61, 46, .07);
  --maxw: 1100px;

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

/* Tema escuro */
[data-theme="dark"] {
  --color-primary: #2FA37A;     /* esmeralda clara (links/botões no escuro) */
  --color-primary-700: #268A66;
  --color-accent: #D4AF37;      /* ouro um pouco mais brilhante no escuro */
  --color-accent-700: #E6C65A;  /* ouro claro p/ texto sobre fundo escuro */
  --color-text: #E6EDE9;
  --color-muted: #93A89D;
  --color-bg: #0C1A14;          /* verde quase preto */
  --color-surface: #112318;
  --color-surface-2: #16301F;
  --color-border: #234231;
  --shadow: 0 10px 30px rgba(0, 0, 0, .40);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .32);
}