/*
 * Tokens do design system — docs/02-design-system.md
 *
 * Paleta quase monocromática definida pelo cliente. Não inventar cores fora
 * desta escala; os derivados permitidos já estão listados abaixo.
 *
 * Os valores são os mesmos do @theme do Tailwind usado na versão em Next: a
 * migração trocou o mecanismo, não o design.
 */

/* Montserrat — fonte variável (400–700) auto-hospedada, no lugar do next/font */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cores da marca */
  --color-brand-white: #ffffff;
  --color-brand-gray-50: #f7f7f7; /* fundo alternado de seções, cards */
  --color-brand-gray-200: #e5e5e5; /* bordas suaves, divisores */
  --color-brand-gray-300: #bbbbbb; /* bordas, placeholders — nunca texto de leitura */
  --color-brand-gray-500: #706f6f; /* texto secundário, legendas, ícones */
  --color-brand-gray-800: #403f3f; /* texto principal, botões primários */
  --color-brand-gray-900: #2b2a2a; /* hover do botão primário */
  --color-brand-error: #dc2626; /* erros de validação */

  /*
   * Acento da marca (REQ-008) — o teal da campanha, como na capa social.
   * É uma cor de SUPERFÍCIE ESCURA: 7:1 sobre gray-900 e 5,2:1 sobre gray-800,
   * mas só 2,03:1 sobre branco — não usar como texto, ícone ou borda em fundo
   * claro (reprova até o mínimo de 3:1 de componente não-textual).
   * Sobre fundo claro, usar `accent-deep`, que passa em AA (5,3:1).
   */
  --color-brand-accent: #56c8b5;
  --color-brand-accent-deep: #12796a;
  --color-brand-accent-hover: #45b5a3;

  /*
   * Petróleo da campanha — a superfície escura das peças sociais. Usado como
   * base e véu do hero com mídia: por ser da mesma família fria do acento,
   * mantém o teal vivo, enquanto um véu cinza-quente o dessatura.
   */
  --color-brand-deep: #0a1a20;

  /* Tipografia — Montserrat como família única */
  --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /*
   * Redesign (REQ-016) — paleta do novo layout da agência (Figma
   * LP-Positivo-Tecnologia). Convive com a paleta antiga enquanto a
   * migração visual acontece seção por seção; ao final, os tokens
   * antigos que ficarem sem uso serão removidos.
   */
  --rd-preto: #131312; /* fundo escuro do novo tema */
  --rd-cinza-claro: #e8ebef; /* fundo do header */
  --rd-cinza-texto: #a7a8aa; /* headline cinza sobre o preto (≈8:1) */
  --rd-cinza-globo: #939596; /* ícones de globo do header */
  --rd-acento: #59d9c0; /* verde-água da nova identidade */
  --rd-verde-botao: #408173; /* botões sólidos pequenos (SAIBA MAIS) */
  --rd-cinza-borda: #98999c; /* borda dos cards sobre o painel claro */

  /* Border radius padrão único do projeto */
  --radius-brand: 8px;

  /* Container */
  --container-page: 1200px;

  /* Altura do header fixo — usada nas âncoras (scroll-margin) */
  --altura-header: 72px;
}