/* Olha Meu Dinheiro, tokens da identidade "Tinta e Sol" (2026-11-02).
   Base: disciplina da Ramp (um acento só, bordas hairline, sem sombra) com paleta quente e Fraunces. */
:root {
  /* Cores */
  --color-ink: #0e2a31;        /* texto principal e títulos */
  --color-obsidian: #0b1e23;   /* painéis e faixas invertidas */
  --color-bone: #f5f2ea;       /* fundo da página */
  --color-paper: #ffffff;      /* cartões e texto sobre escuro */
  --color-ash: #66726f;        /* texto secundário e legendas */
  --color-hairline: #e3ddcf;   /* bordas e divisores (no lugar de sombra) */
  --color-sun: #f2b83b;        /* ÚNICO acento: ações, estados ativos e o "m" do monograma */

  /* Tipografia */
  --font-display: "Fraunces", Georgia, serif;   /* títulos: peso 700, opsz 48, SOFT 0 */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-display: 700;
  --display-variation: "opsz" 48, "SOFT" 0;
  --weight-body: 400;
  --weight-ui: 500;           /* botões e rótulos de interface */
  --text-caption: 12px;       /* caixa alta, tracking .06em; piso do DESIGN.md */
  --text-body: 16px;
  --text-lead: 18px;
  --text-heading: 28px;
  --text-heading-lg: 40px;
  --text-display: 56px;       /* hero; 38-40px no celular */
  --leading-display: 1.04;
  --leading-body: 1.5;

  /* Espaço (base 4) e forma */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-32: 128px;
  --radius-button: 6px;
  --radius-input: 10px;
  --radius-wash: 12px;
  --radius-card: 16px;
  --page-max: 1200px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-variation-settings: var(--display-variation); }