/*
 * Bespoke — tokens de design
 *
 * Estrutura (escala, espaçamento, raios) do DESIGN.md; paleta e fontes do KV Bespoke.
 * Substitutos das fontes do DESIGN.md: PP Editorial Old → Cormorant Garamond,
 * Saans → Archivo, Favorit Mono → IBM Plex Mono.
 * Tamanhos fluidos interpolam entre 390px e a largura do artboard de referência.
 */

:root {
  /* Cores */
  --color-azul-alfaiate: #1b2a4a; /* confiança: campos escuros, menu, rodapé */
  --color-giz-terracota: #b04a24; /* ação: fita métrica, acentos, botão principal */
  --color-linho: #ede6da;         /* superfície; texto secundário sobre o azul */
  --color-papel: #faf8f3;         /* fundo; texto sobre o azul */
  --color-grafite: #141414;       /* texto */
  --color-branco: #ffffff;        /* cartões */
  --color-fio: #dad5cb;           /* fios, bordas e linha dos campos */
  --color-areia: #f3efe8;         /* barra de endereço do mockup */
  --color-chumbo: #4a4a4a;        /* texto secundário sobre o claro */
  --color-nevoa: #e3e3e9;         /* controle utilitário circular */

  /* Famílias */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-text: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Escala tipográfica */
  --text-mono-sm: 12px;
  --tracking-mono-sm: 0.36px;
  --text-mono: 14px;
  --tracking-mono: 0.42px;
  --text-meta: 16px;
  --text-input: 20px;
  --text-body: clamp(18px, 17.26px + 0.19vw, 20px);
  --text-lede: clamp(22px, 18.94px + 0.784vw, 34px);
  --text-lede-lg: clamp(26px, 20.8px + 1.333vw, 40px);
  --text-tagline: clamp(28px, 24.94px + 0.784vw, 40px);
  --text-contact: clamp(32px, 29.96px + 0.523vw, 40px);
  --text-title: clamp(36px, 30.06px + 1.524vw, 52px);
  --text-display: clamp(40px, 28.11px + 3.048vw, 72px);
  --text-marquee: max(clamp(44px, 35.33px + 2.222vw, 78px), 4.0625vw);
  --text-nav-display: clamp(32px, 10.8vw, 100px); /* "Google Meu Negócio" cabe numa linha */
  --text-statement: clamp(56px, 14.4px + 10.667vw, 168px);

  /* Espaçamento (escala do DESIGN.md) */
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-60: 60px;

  /* Layout */
  --gutter: clamp(16px, 3.76px + 3.137vw, 64px);
  --section-gap: 16px;
  --section-space: clamp(40px, 25.14px + 3.81vw, 80px);
  --panel-padding: clamp(24px, 12.11px + 3.048vw, 56px);
  --card-padding: 16px;
  --element-gap: 10px;

  /* Raios */
  --radius-link: 6px;
  --radius-card: 16px;
  --radius-image: 24px;
  --radius-input: 0;
  --radius-pill: 1000px;
}

@media (min-width: 768px) {
  :root {
    --section-gap: 24px;
  }
}