/* ══════════════════════════════════════════════════════════════
   PRIME HARDWOOD FLOORS — tokens
   Toda cor, fonte, medida e tempo do site. Nenhum componente
   escreve valor cru: mudar a marca é mudar este arquivo.

   Origem:
   - cores: paleta da marca nova (31/10, apresentação da marca)
     Amarelo Prime #F8D21C · Preto Ébano #17130F · Nogueira #5A3A22
     Carvalho #B9874F · Serragem #F3EBDD. Fundo escuro é sempre Ébano.
   - escala, raios e espaços: referência bitrig.com/remote
     (material/referencias/bitrig.md), filtrada pelo Padrão Samuel Freire

   Contraste conferido (WCAG):
   tinta/papel 17.6 · texto-2/papel 7.4 · madeira-texto/papel 6.5
   tinta/amarelo 16.1 · amarelo/tinta 16.1 · branco/tinta 18.4
   claro-2/tinta 10.5 · madeira-clara/tinta 5.3
   ✗ branco sobre amarelo = 1.15 → o amarelo NUNCA leva texto branco
   ✗ amarelo sobre fundo claro → nunca como texto, só preenchimento
   ✗ madeira #92613C sobre tinta = 3.5 → só decoração no escuro
   botões (31/10): Ébano com texto Serragem sobre o claro; amarelo com texto Ébano sobre o escuro
   ══════════════════════════════════════════════════════════════ */

/* ── Fonte: Montserrat (marca nova, 31/10): ExtraBold no PRIME e títulos,
   SemiBold no HARDWOOD FLOORS, texto em Medium. Variável, auto-hospedada,
   gerada do Montserrat.ttf da marca (02-APRESENTACAO-MARCA/assets). ── */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Cor: marca (do logo) ── */
  --amarelo: #F8D21C;        /* Amarelo Prime · destaque, botão no escuro */
  --preto: #17130F;          /* Preto Ébano */
  --branco: #FFFFFF;
  --madeira: color-mix(in srgb, var(--nogueira) 50%, var(--carvalho)); /* meio-termo · decoração */
  --madeira-clara: var(--carvalho); /* texto pequeno sobre Ébano */
  --madeira-escura: var(--nogueira); /* texto sobre Serragem */
  --nogueira: #5A3A22;
  --carvalho: #B9874F;
  --serragem: #F3EBDD;

  /* ── Cor: superfícies claras (maioria das seções, P32) ── */
  --papel: color-mix(in srgb, var(--serragem) 18%, var(--branco)); /* quase branco (31/10: o creme forte pesava) */
  --papel-2: color-mix(in srgb, var(--serragem) 55%, var(--branco)); /* faixa clara alternada, Serragem suave */
  --cartao: transparent;     /* sem caixa branca: o bloco é desenhado pelo fio (31/10) */
  --campo: var(--branco);    /* campos do formulário continuam brancos */
  --linha: rgba(23, 19, 15, .1);      /* borda fina de card (Bitrig: 6%) */
  --linha-forte: rgba(23, 19, 15, .2);

  /* ── Cor: superfícies escuras (ritmo, faixas pretas) ── */
  --tinta: var(--preto);     /* Ébano: texto principal e seções escuras */
  --tinta-2: color-mix(in srgb, var(--preto) 94%, var(--serragem)); /* card sobre Ébano (nunca Grafite) */
  --linha-escura: rgba(255, 255, 255, .1);

  /* ── Cor: texto ── */
  --texto: var(--tinta);
  --texto-2: color-mix(in srgb, var(--preto) 70%, var(--branco)); /* apoio sobre o fundo claro */
  --texto-claro: var(--serragem);
  --texto-claro-2: color-mix(in srgb, var(--serragem) 74%, var(--preto)); /* apoio sobre Ébano */

  /* ── Cor: ação (botões). Marca nova: amarelo e preto na frente (verde saiu em 31/10) ── */
  --btn-claro: var(--preto);  /* botão sobre fundo claro: Ébano, círculo amarelo */
  --btn-escuro: var(--amarelo); /* botão sobre Ébano: amarelo, texto Ébano */

  /* ── Cor: hover e preenchimentos leves ── */
  --amarelo-hover: color-mix(in srgb, var(--amarelo) 85%, var(--branco));
  --tinta-hover: color-mix(in srgb, var(--preto) 82%, var(--nogueira));
  --chip-fundo: rgba(23, 19, 15, .06);        /* Bitrig: preto 5% */
  --chip-fundo-escuro: rgba(255, 255, 255, .08);

  /* ── Cor: estado ── */
  --foco: var(--amarelo);
  --erro: #B3261E;           /* 6.3 sobre papel */
  --ok: #2E6B34;             /* 6.2 sobre papel */

  /* ── Google (avaliações, cores oficiais) ── */
  --g-azul: #4285F4;
  --g-vermelho: #EA4335;
  --g-amarelo: #FBBC05;
  --g-verde: #34A853;
  --estrela: #FBBC05;

  /* ── Luz e véu: leves, uma só por seção (P31, A §3) ── */
  --luz-hero: radial-gradient(60% 55% at 50% 0%, rgba(248, 210, 28, .2) 0%, rgba(248, 210, 28, 0) 70%);
  --luz-final: linear-gradient(transparent, transparent); /* sem brilho: fundo limpo (31/10) */
  --veu: rgba(23, 19, 15, .55);
  /* véu da hero com vídeo: Ébano forte à esquerda (texto) e na base, vídeo respira à direita */
  --veu-hero: linear-gradient(0deg, rgba(23, 19, 15, .92) 0%, rgba(23, 19, 15, .55) 38%, rgba(23, 19, 15, .2) 70%, rgba(23, 19, 15, .45) 100%);

  /* ── Sombras: curtas ou nenhuma (G26) ── */
  --sombra-1: 0 0 0 1px var(--linha-forte); /* sem sombra: só o fio fino */
  --sombra-barra: 0 0 0 1px var(--linha), 0 4px 16px rgba(23, 19, 15, .08);

  /* ── Bordas ── */
  --borda-campo: rgba(23, 19, 15, .4);       /* 3:1 sobre branco */
  --borda-vazada: color-mix(in srgb, currentColor 28%, transparent);
  --anel-foco: 0 0 0 3px rgba(23, 19, 15, .9), 0 0 0 5px var(--amarelo);

  /* ── Tipografia ── */
  --fonte-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fonte-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* escala do Bitrig: H1 72 → 39 no celular, H2 36, texto 16 a 18 */
  --t-hero: clamp(2.25rem, 1.5rem + 3.2vw, 4.125rem);
  --t-h2: clamp(1.9rem, 1.5rem + 1.4vw, 2.75rem);
  --t-h3: clamp(1.15rem, 1.05rem + .35vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-corpo: 1rem;
  --t-peq: .875rem;
  --t-mini: .75rem;
  --card-icone: 36px;                              /* ícone dos cartões de serviço */
  --t-numero-faixa: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); /* números abaixo da capa */
  --faixa-video-h: clamp(420px, 60vh, 640px);      /* faixa do vídeo antes/depois */
  --mapa-h: 420px;                                 /* mapa da área atendida */
  --vsl-largura: 960px;                            /* vídeo do antes/depois */
  --caixa-marcar: 16px;                            /* caixinha das opções do formulário */
  --t-orcamento: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); /* título do orçamento, contido */
  --selo-orc: 44px;                                /* símbolo acima do título do orçamento */
  --t-sobre: clamp(2.25rem, 1.2rem + 3vw, 4rem);  /* título do Sobre, editorial */
  --t-numero-etapa: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); /* número do processo, leve */
  --t-numero: clamp(4.5rem, 3.5rem + 3vw, 6.5rem);   /* big number grande no celular (G29) */

  --peso-display: 800;        /* ExtraBold, como o PRIME */
  --largura-display: 100%;
  --peso-ui: 500;
  --peso-ui-forte: 600;
  --entrelinha-display: 1.04;
  --entrelinha-titulo: 1.15;
  --entrelinha-corpo: 1.6;
  --tracking-display: -.02em;
  --tracking-titulo: -.015em;
  --tracking-rotulo: .12em;

  /* ── Espaço ── */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-secao: clamp(4.5rem, 2.5rem + 5vw, 8rem);    /* Bitrig ~128px; cabe em 1366×768 */
  --gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);   /* 20px no celular (P46) */
  --largura: 1080px;                               /* grades (Bitrig) */
  --largura-texto: 760px;                          /* FAQ e textos (Bitrig) */
  --btn-h: 52px;
  --btn-h-peq: 40px;
  --btn-icone: 36px;
  --btn-icone-peq: 30px;
  --chip-h: 38px;
  --toque: 44px;                                   /* área mínima de toque */
  --campo-h: 52px;
  --avatar: 40px;
  --reel-altura: calc(100cqw * 1.25 + 220px);       /* player do Instagram até ele informar a altura real */
  --reel-corte: 152px;                              /* rodapé do embed do Instagram escondido (link, curtidas, comentário) */
  --reel-largura: min(78vw, 340px);                 /* card do reel no celular (mostra pedaço do próximo, P62) */
  --piso-amostra: 28px;                            /* amostra de piso no "We work with" */
  --avatar-letra: 1.25rem;                         /* 20px negrito = texto grande no WCAG */
  --g-logo: 18px;
  --selo-peq: 72px;                                /* altura do símbolo no orçamento */
  --logo-barra: 46px;                              /* logo nova no cabeçalho */
  --hero-altura: min(100svh, 980px);               /* hero de vídeo: tela cheia, com teto em monitor alto */
  --hero-simbolo: 22px;                            /* losango antes do rótulo da hero */
  --t-hero-video: clamp(2.75rem, 1rem + 6.2vw, 7.25rem); /* título enorme sobre o vídeo (referências) */
  --peso-hero: 700;                                /* Montserrat Bold: elegante no tamanho grande */
  --tracking-hero: -.035em;
  --hero-lado: 340px;                              /* coluna de texto e botões à direita */
  --raio-btn: 0;                                   /* botões retos (31/10) */
  --marca-tam: 2.375rem;                           /* PRIME da marca grande (orçamento) */
  --marca-folga: .55em;                            /* folga lateral: caixa mais retangular */
  --marca-borda: 4px;                              /* 2px do cabeçalho, na escala */
  --marca-raio: 8px;                               /* pouco arredondada */
  --marca-hero-h: clamp(48px, 2.5vw + 40px, 76px); /* caixa PRIME da hero: um pouco maior que a do orçamento */
  --marca-hero-tam: clamp(1.875rem, 1.5vw + 1.5rem, 2.875rem);
  --marca-nome-tracking: .34em;                    /* HARDWOOD FLOORS espaçado, na largura da caixa */
  --seta: 44px;
  --linha-faq: 72px;
  --bento-linha: clamp(190px, 14vw, 220px);        /* 2 linhas + faixa de "outros" cabem em 1366×768 */
  --galeria-h: clamp(240px, 28vw, 380px);
  --cartao-avaliacao: min(84vw, 360px);
  --marca-rodape: clamp(3.5rem, 17vw, 14rem);
  --borda-h: clamp(40px, 6vw, 80px);
  --nav-h: 76px;                                   /* barra reta do topo */
  --nav-topo: 24px;

  /* ── Raios (Bitrig: 16 em cards, pílula em botões e chips) ── */
  --raio-card: 0;            /* quadrado, fios finos (31/10) */
  --raio-foto: 0;
  --raio-campo: 0;
  --raio-selo: 0;
  --raio-pilula: 999px;

  /* ── Tempo e curva ── */
  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-encaixe: cubic-bezier(.34, 1.4, .64, 1);   /* tábua que encaixa com leve quique */
  --d-rapida: .2s;
  --d-media: .55s;
  --d-lenta: .9s;
  --d-esteira: 45s;
  --d-esteira-pisos: 18s;                          /* "We work with" no celular */
  --atraso-cascata: 80ms;
  --atraso-palavra: 70ms;                          /* naocodei js 16: 70ms entre palavras */
  --curva-cortina: cubic-bezier(.76, 0, .24, 1);   /* naocodei css 21 */
  --d-cortina: 1s;
  --selo-hero: clamp(64px, 3vw + 48px, 92px);      /* altura do selo recortado na hero */
}