/* Studio Balma — Design tokens v1.0 */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&family=Michroma&display=swap");

:root {
  /* Cores base */
  --balma-grafite: #121212;      /* fundo base */
  --balma-carvao: #1B1B1D;       /* superfícies e cartões */
  --balma-aco: #2E2E31;          /* bordas e divisores */
  --balma-bronze: #8C6F36;       /* fios finos e linhas de seção */
  --balma-bronze-escuro: #6F5628;/* fios sobre fundo claro (não usar em texto) */
  --balma-ouro: #C8A25E;         /* ações e destaque */
  --balma-ouro-claro: #E2C88F;   /* hover e foco */
  --balma-marfim: #F2EEE6;       /* texto principal e seções claras */
  --balma-nevoa: #ABA79D;        /* texto secundário */

  /* Semânticos (tema escuro) */
  --bg: var(--balma-grafite);
  --surface: var(--balma-carvao);
  --border: var(--balma-aco);
  --line: var(--balma-bronze);
  --text: var(--balma-marfim);
  --text-muted: var(--balma-nevoa);
  --accent: var(--balma-ouro);
  --accent-hover: var(--balma-ouro-claro);
  --on-accent: var(--balma-grafite);
  --focus: var(--balma-marfim);

  /* Tipografia */
  --font-display: Michroma, Eurostile, "Segoe UI", sans-serif;
  --font-text: "Hanken Grotesk", system-ui, sans-serif;
  --fs-display: 56px;  --lh-display: 68px;
  --fs-h1: 40px;       --lh-h1: 50px;
  --fs-h2: 28px;       --lh-h2: 36px;
  --fs-h3: 18px;       --lh-h3: 26px;
  --fs-body: 17px;     --lh-body: 28px;
  --fs-caption: 14px;  --lh-caption: 22px;
  --tracking-display: 0.02em;

  /* Espaçamento */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;

  /* Forma */
  --radius: 2px;
  --border-width: 1px;
  --control-height: 48px;
  --container: 1200px;

  /* Movimento */
  --motion-duration: 240ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Seções claras */
.balma-light {
  --bg: var(--balma-marfim);
  --text: var(--balma-grafite);
  --text-muted: #4A4741;
  --line: var(--balma-bronze-escuro);
}

/* Base */
body { margin: 0; background: var(--bg); color: var(--text); font: 300 var(--fs-body)/var(--lh-body) var(--font-text); }
.balma-display { font: 400 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--tracking-display); }
.balma-h1 { font: 400 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tracking-display); }
.balma-h2 { font: 400 var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--tracking-display); }
.balma-h3 { font: 400 var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tracking-display); }
.balma-caption { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-text); color: var(--text-muted); }

/* Botões */
.balma-btn { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 28px; border: var(--border-width) solid var(--accent); border-radius: var(--radius); font: 500 15px var(--font-text); letter-spacing: 0.02em; cursor: pointer; transition: background var(--motion-duration) var(--motion-ease); }
.balma-btn--primary { background: var(--accent); color: var(--on-accent); }
.balma-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.balma-btn--secondary { background: transparent; color: var(--accent); }
.balma-btn--secondary:hover { background: rgba(200, 162, 94, 0.12); }
.balma-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.balma-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Campo */
.balma-input { width: 100%; box-sizing: border-box; min-height: var(--control-height); padding: 12px 16px; background: var(--surface); border: var(--border-width) solid var(--border); border-bottom-color: var(--accent); border-radius: var(--radius); color: var(--text); font: 300 16px var(--font-text); }
.balma-input:focus { outline: none; border-color: var(--accent-hover); }
.balma-label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-caption); color: var(--text-muted); }

/* Cartão */
.balma-card { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius); padding: 32px; }
.balma-card::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: var(--space-4); background: var(--accent); }

/* Etiqueta */
.balma-tag { display: inline-block; padding: 2px 12px; border: var(--border-width) solid var(--accent); border-radius: var(--radius); color: var(--accent); font-size: 13px; }

@media (prefers-reduced-motion: reduce) { :root { --motion-duration: 0ms; } }