/* Tokens do design system. Fonte: design-system.md (seção "Código pronto"). Não edite valores aqui sem atualizar o .md. */
:root {
  --brand-teal: #005b7e;
  --brand-mint: #42c09e;
  --brand-ink: #03202b;
  --brand-mist: #ebeaea;
  --brand-white: #ffffff;
  --accent-sky: #8be9f6;
  --accent-blue: #2b86d9;
  --surface-page: #ebeaea;
  --surface-card: #ffffff;
  --surface-raised: #f5f4f4;
  --border-subtle: #d8d6d6;
  --text-primary: #03202b;
  --text-muted: #5c6a70;
  --action-primary: #03202b;
  --on-action: #ffffff;
  --positive: #18763a;
  --negative: #c0321f;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xs: 4px;
  --radius-pill: 999px;
  --size-name: min(23vw, 36svh);
  --size-monument: clamp(56px, 7.5vw, 144px);
  --gradient-brand: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-teal) 25%, var(--brand-mint) 100%);
  --font-sans: Aeonik, "Hanken Grotesk", system-ui, sans-serif;
}

@media (max-width: 640px) {
  :root {
    --size-name: 30vw;
    --size-monument: 15vw;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #000000;
    --surface-card: #181818;
    --surface-raised: #242424;
    --border-subtle: #303030;
    --text-primary: #ffffff;
    --text-muted: #a8a8a8;
    --action-primary: #ffffff;
    --on-action: #03202b;
    --positive: #4cc26e;
    --negative: #ff6b57;
  }
}

[data-theme="dark"] {
  --surface-page: #000000;
  --surface-card: #181818;
  --surface-raised: #242424;
  --border-subtle: #303030;
  --text-primary: #ffffff;
  --text-muted: #a8a8a8;
  --action-primary: #ffffff;
  --on-action: #03202b;
  --positive: #4cc26e;
  --negative: #ff6b57;
}

.monument { font: 500 var(--size-monument)/0.9 var(--font-sans); letter-spacing: -0.05em; }
.display { font: 500 48px/50px var(--font-sans); letter-spacing: -0.02em; }
.balance { font: 500 32px/36px var(--font-sans); letter-spacing: -0.01em; }
.h2 { font: 500 24px/30px var(--font-sans); }
.h3 { font: 500 16px/22px var(--font-sans); }
.text { font: 400 16px/22px var(--font-sans); }
.body { font: 400 14px/20px var(--font-sans); }
.caption { font: 400 12px/16px var(--font-sans); }