/*
 * Tokens do design system Canteiro, gerados a partir de docs/design/tokens.json.
 * Não edite à mão sem atualizar o tokens.json. Cada token traz a regra de uso do campo "usage".
 */
:root {
  /* Cores */
  --oliva-50: #F3F2E8; /* Fundo sutil de seções verdes e do ícone de categoria em hover. */
  --oliva-100: #EAE8D6; /* Fundo da etiqueta Venda e do quadro do ícone de categoria. Texto sobre ele: oliva-800. */
  --oliva-500: #9C9B5A; /* Verde oficial do logo. Uso de marca e decorativo (ilustrações, símbolo). NUNCA como fundo de texto branco nem como cor de texto: contraste 2,9:1. */
  --oliva-700: #5F5E33; /* Cor de ação principal: botão primário (texto branco, 6,7:1), links, anel de foco, preço Grátis, ícones de categoria. */
  --oliva-800: #46452A; /* Hover/pressionado do botão primário e texto sobre oliva-100. */
  --terracota-100: #F6E1D7; /* Fundo da etiqueta Doação. Texto sobre ele: terracota-700. */
  --terracota-500: #C15328; /* Terracota oficial do logo. Preço e botão de contato com anunciante (texto branco, 4,6:1). Em texto, só a partir de 18px negrito. */
  --terracota-700: #9A3E1B; /* Texto terracota em tamanho pequeno, hover do botão de contato, texto da etiqueta Doação. */
  --areia-100: #F4E6CF; /* Fundo da etiqueta Troca e de avisos neutros. Texto sobre ele: areia-800. */
  --areia-400: #DAA869; /* Areia da paleta da marca (valor medido na arte; ver nota no README). Destaques e ilustração, nunca texto. */
  --areia-800: #7A5418; /* Texto sobre areia-100. */
  --grafite-900: #2F2E2C; /* Títulos e texto de maior ênfase. */
  --grafite-700: #444342; /* Grafite oficial da marca. Texto corrido e ícones de interface. */
  --grafite-500: #6B6966; /* Texto secundário, legendas e metadados (5:1 sobre papel, 5,5:1 sobre branco). */
  --borda-controle: #8E8A80; /* Borda de campos de formulário em repouso (3,4:1 sobre branco, mínimo para controles). */
  --linha: #E2DCCD; /* Divisórias e bordas decorativas de cards. Não serve como borda de campo. */
  --papel: #F7F4EC; /* Fundo das páginas. */
  --superficie: #FFFFFF; /* Cards, formulários, barras e modais sobre papel. */
  --superficie-sutil: #F3F0E8; /* Chips de ficha técnica, controle segmentado, áreas de apoio dentro de cards. */
  --erro-600: #B3261E; /* Borda e mensagem de erro de campo (6,5:1 sobre branco). */
  --erro-100: #FBE5E3; /* Fundo de alertas de erro. */
  --desabilitado-fundo: #E2DED0; /* Fundo de botões desabilitados. */
  --desabilitado-texto: #85827C; /* Texto de botões desabilitados (isento de contraste por estar inativo). */

  /* Famílias */
  --fonte-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Estilos de texto (tamanho / altura de linha / peso) */
  --display-tamanho: 40px; /* Chamada da home e páginas de campanha. Uma por tela. */
  --display-linha: 44px;
  --display-peso: 600;
  --display-espacamento: -0.01em;
  --titulo-1-tamanho: 28px; /* Título do detalhe do anúncio e de páginas. */
  --titulo-1-linha: 34px;
  --titulo-1-peso: 600;
  --titulo-2-tamanho: 22px; /* Títulos de seção. */
  --titulo-2-linha: 28px;
  --titulo-2-peso: 600;
  --titulo-card-tamanho: 18px; /* Título no card de anúncio (máx. 2 linhas). */
  --titulo-card-linha: 24px;
  --titulo-card-peso: 600;
  --preco-tamanho: 24px; /* Preço no card (terracota-500) ou Grátis (oliva-700). 32px no detalhe. */
  --preco-linha: 28px;
  --preco-peso: 700;
  --corpo-tamanho: 16px; /* Texto corrido e descrição do anúncio. Nunca menor que 16px em campos (evita zoom no iOS). */
  --corpo-linha: 24px;
  --corpo-peso: 400;
  --corpo-sm-tamanho: 14px; /* Textos de apoio. */
  --corpo-sm-linha: 20px;
  --corpo-sm-peso: 400;
  --rotulo-tamanho: 14px; /* Rótulos de campo e etiquetas. */
  --rotulo-linha: 20px;
  --rotulo-peso: 600;
  --legenda-tamanho: 13px; /* Metadados: data, distância, bairro. Cor grafite-500. */
  --legenda-linha: 18px;
  --legenda-peso: 500;
  --medida-tamanho: 14px; /* Medidas, quantidades e áreas. Sempre com unidade. */
  --medida-linha: 20px;
  --medida-peso: 500;
  --medida-rotulo-tamanho: 11px; /* Rótulo em caixa alta acima de cada valor da ficha técnica. Cor grafite-500. */
  --medida-rotulo-linha: 14px;
  --medida-rotulo-peso: 500;
  --medida-rotulo-espacamento: 0.06em;

  /* Espaçamento */
  --space-1: 4px; /* Espaço entre ícone e texto pequeno. */
  --space-2: 8px; /* Gap entre chips e etiquetas. */
  --space-3: 12px; /* Gap entre campos lado a lado; entre título e metadados no card. */
  --space-4: 16px; /* Padding horizontal de campos; gap padrão de grade de cards no mobile. */
  --space-5: 20px; /* Padding interno do card de anúncio. */
  --space-6: 24px; /* Padding de formulários e painéis; gap de grade no desktop. */
  --space-8: 32px; /* Separação entre blocos dentro de uma seção. */
  --space-12: 48px; /* Separação entre seções no mobile. */
  --space-16: 64px; /* Separação entre seções e margem lateral no desktop. */

  /* Raios */
  --radius-sm: 8px; /* Chips de ficha técnica e itens do controle segmentado. */
  --radius-md: 12px; /* Campos e botões. */
  --radius-lg: 20px; /* Cards de anúncio, painéis e quadros de categoria. */
  --radius-full: 999px; /* Etiquetas (Venda, Doação, Troca) e botões só com ícone. */

  /* Sombras */
  --sombra-card: 0 1px 2px rgba(47,46,44,0.06), 0 6px 20px rgba(47,46,44,0.08); /* Card em hover e menus flutuantes. Em repouso os cards não têm sombra. */
  --sombra-foco: 0 0 0 3px #EAE8D6; /* Halo do campo focado, junto da borda oliva-700. */

  /* Tamanhos */
  --controle-md: 48px; /* Altura de campos e botões padrão. */
  --controle-lg: 52px; /* Altura do botão de ação principal da tela. */
  --alvo-toque: 44px; /* Área mínima de toque de qualquer elemento clicável, inclusive botões de ícone. */
}