/* ==========================================================================
   PONTO CERTO v5 — camada de tokens
   Arquitetura portada do haoqi.design (escada de opacidade sobre UM triplete
   RGB) vestida com a paleta Premium Rústico do DNA.
   ========================================================================== */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  color-scheme: dark;

  /* --- o triplete que gera toda a hierarquia de texto (método haoqi) ------ */
  --label: 243, 236, 224;        /* creme #F3ECE0 */
  --label-d: 231, 222, 208;      /* creme dessaturado, pros níveis fracos */
  --background-deep: 26, 19, 16; /* madeira-fumaça #1A1310 */

  --l1: rgba(var(--label), 1);
  --l2: rgba(var(--label-d), 0.62);
  --l3: rgba(var(--label-d), 0.34);
  --l4: rgba(var(--label-d), 0.18);
  --line: rgba(var(--label-d), 0.11);
  --line-forte: rgba(var(--label-d), 0.2);

  --b1: rgb(var(--background-deep));
  --b-elevado: #221a15;
  --b-fundo: #120d0b;

  /* --- assinatura da marca (DNA) ----------------------------------------- */
  /* ===== TESTE 24/08: acento único no laranja do brasão =====================
     Decisão do Thiago: TODO acento laranja passa a ser o #FF8D00 do logo.
     Valores anteriores, se precisar voltar:
       --brasa: #c75b27 · --brasa-viva: #e2712f · --espeto: #e0a52e
     Consequência medida: creme sobre #FF8D00 dá 2.19 e REPROVA. Por isso todo
     texto sobre superfície laranja virou escuro (#17110E, que dá 8.07).      */
  --brasa: #ff8d00;
  --brasa-viva: #ff8d00;
  --espeto: #ff8d00;
  --brasa-hover: #ffa32e;
  /* texto que vai POR CIMA de laranja aceso */
  --sobre-laranja: #17110e;
  --creme: #f3ece0;
  /* o laranja do PRÓPRIO brasão, medido no arquivo (433 mil px em #FF8D00).
     É mais aceso que a brasa #C75B27 do DNA: serve de assinatura em elemento
     de interface, não de cor de bloco. */
  --laranja-logo: #ff8d00;

  /* rampa de brasa: substitui a rampa verde dos cartões do Volt */
  --rampa-1: #ff8d00;
  --rampa-2: #e07200;
  --rampa-3: #b25a06;
  --rampa-4: #7d3d09;
  --rampa-5: #4a2308;

  --selection-bg: var(--espeto);
  --selection-fg: #17110e;

  /* --- tipografia: papéis herdados do design system do site v1 -------------
     v1: --display Anton (headline) · --cond Oswald (nome, botão, tag)
         --serif Bitter (título de seção) · --body Inter.
     SEM CURSIVA: decisão do Thiago em 24/08, vale no site inteiro.        */
  --f-display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --f-cond: "Oswald", "Arial Narrow", sans-serif;
  --f-titulo: "Bitter", Georgia, serif;
  --f-corpo: "Inter", system-ui, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* a Anton pede tracking POSITIVO, ao contrário da Oswald (v1) */
  --track-display: 0.01em;
  /* 1.02, e NÃO os 0.92 do v1: em caixa alta o til de MORINGÃO e o circunflexo
     de VOCÊ colidem com a linha de cima e somem. Medido em 24/08 comparando
     0.92 / 0.98 / 1.02 / 1.08: 1.02 é o mais apertado que livra o acento.
     Não baixar sem testar com palavra acentuada. */
  --lh-display: 1.02;

  /* 0.6875rem = 11px. Confortavel no desktop; no celular e o piso do
     desconforto, e quase todo rotulo do site usa este token. Sobe pra 12px
     abaixo de 768px — medido em 2026-08-25, quando a auditoria mobile mostrou
     11px em 11 das 13 dobras. */
  --t-micro: 0.6875rem;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 2.2vw, 2rem);
  --t-2xl: clamp(1.85rem, 3.4vw, 2.9rem);
  --t-3xl: clamp(2.15rem, 4.6vw, 4.15rem);
  --t-hero: clamp(3.5rem, 13.5vw, 15rem);

  --track-mono: 0.14em;
  --track-tight: -0.02em;

  /* --- ritmo e grade ------------------------------------------------------ */
  --grid-columns: 12;
  --gap: clamp(0.75rem, 1.4vw, 1.5rem);
  --pad-container: clamp(1.15rem, 4vw, 3.5rem);
  --largura-max: 1680px;

  /* --- movimento (ease assinatura portada do haoqi) ------------------------ */
  --cubic-66: cubic-bezier(0.66, 0, 0.01, 1);
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rapida: 150ms;
  --dur-media: 300ms;
  --dur-lenta: 620ms;

  --raio: 2px;
  --z-cursor: 90;
  --z-hud: 60;
  --z-nav: 50;
  --z-grade: 80;
}
@media (max-width: 767px) {
  :root { --t-micro: 0.75rem; }
}


::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 1ms;
    --dur-media: 1ms;
    --dur-lenta: 1ms;
  }
}