/* ==========================================================================
   TEMA — K Parafusos  ·  "industrial técnico", versão CLARA

   HISTÓRICO DESTA DECISÃO (importa, para ninguém desfazer sem saber):
   A primeira versão era ESCURA (preto do `canvas-visual` + laranja #F97316).
   Foi REPROVADA pelo Guilherme em 08/08/2026, ao ver a amostra: as fotos de
   produto não funcionaram sobre preto. Trocada por clara no mesmo dia.

   E a troca revelou um erro maior: o tema estava construído em LARANJA, mas
   a marca da K Parafusos é VERMELHA. O logo é um quadrado vermelho com K
   branco. Laranja de interface com logo vermelho brigam na mesma tela. Agora
   a cor de acento sai do logo, não de um design system emprestado.

   BASE: `design-systems/banco/futureui/` — neutro industrial, cinza sobre
   cinza, Oswald condensada nos títulos, acento usado como SINALIZAÇÃO.
   É o único do banco já saneado (0 KB de JavaScript, sem CDN).
   O que veio do `canvas-visual` e sobreviveu: a disciplina de UMA cor só na
   página inteira. Todo o resto é escala de cinza.

   Contrastes MEDIDOS (WCAG 2.1, calculados em 08/08/2026):
     texto  #0A0A0A sobre #E6E6E6 ........... 15,86  AAA
     texto  #0A0A0A sobre card branco ....... 19,80  AAA
     apoio  #525252 sobre #E6E6E6 ...........  6,26  AA
     apoio  #525252 sobre card branco .......  7,81  AAA
     VERMELHO #C20E14 sobre #E6E6E6 .........  5,00  AA
     VERMELHO #C20E14 sobre card branco .....  6,24  AA
     branco sobre o vermelho (botão) ........  6,24  AA
     borda de campo #737373 sobre #E6E6E6 ...  3,80  passa 1.4.11 (mín. 3)
   O divisor decorativo (#C9C9C9) fica abaixo de 3 DE PROPÓSITO: não é
   componente de interface nem carrega informação.

   ⚠️ Os dois vermelhos NÃO são intercambiáveis:
     --c-red-brand (#FF1616) é a cor do LOGO. Só existe dentro da imagem do
       logo. Como texto ou botão ela REPROVA (3,90 sobre branco).
     --accent (#C20E14) é a cor de INTERFACE. Mesmo matiz, escurecida até
       passar em contraste nos dois usos.
   Não trocar um pelo outro para "ficar igual ao logo".
   ========================================================================== */

/* ---- fontes, servidas por nós ------------------------------------------
   Copiadas de `design-systems/banco/futureui/assets/`, originalmente do
   Google Fonts. Servidas do nosso domínio: zero requisição externa.
   Ambas VARIÁVEIS — um arquivo cobre a faixa de peso. 70 KB no total.
   Subset `latin` basta para o português: ã, ç, õ, é, ê e as maiúsculas
   acentuadas estão todas abaixo de U+00FF. Conferido.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("inter-latin.woff2?v=1") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2018-201A, U+2039-203A, U+2044, U+20AC;
}
@font-face {
  font-family: "Oswald";
  src: url("oswald-latin.woff2?v=1") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2018-201A, U+2039-203A, U+2044, U+20AC;
}

:root {
  color-scheme: light;

  /* ---- primitivas -------------------------------------------------------
     Oito cores. UMA é de identidade; as outras sete são cinza.
     ---------------------------------------------------------------------- */
  --c-red-brand:  #ff1616;  /* SÓ o logo. Reprova como texto — ver aviso acima */
  --c-red-600:    #c20e14;  /* acento de interface. Passa nos dois usos     */
  --c-red-800:    #a10e16;  /* pressionado / hover                          */
  --c-white:      #ffffff;  /* card de produto                              */
  --c-grey-100:   #f2f2f2;  /* faixa alternada                              */
  --c-grey-200:   #e6e6e6;  /* FUNDO GLOBAL. A assinatura do futureui       */
  --c-grey-300:   #c9c9c9;  /* divisor decorativo                           */
  --c-grey-500:   #737373;  /* borda de controle — mede 3,80               */
  --c-grey-600:   #525252;  /* texto de apoio                               */
  --c-black-950:  #0a0a0a;  /* texto                                        */

  /* ---- cores semânticas ------------------------------------------------- */
  --bg:        var(--c-grey-200);
  --bg-alt:    var(--c-grey-100);
  --bg-card:   var(--c-white);
  --bg-invert: var(--c-black-950);   /* faixa escura rara, p/ quebrar ritmo */

  --fg:        var(--c-black-950);
  --fg-muted:  var(--c-grey-600);
  --fg-invert: var(--c-grey-200);

  --border:             var(--c-grey-300);
  --border-interactive: var(--c-grey-500);
  --border-strong:      var(--c-black-950);

  --accent:       var(--c-red-600);
  --accent-fg:    var(--c-white);
  --accent-hover: var(--c-red-800);
  --accent-quiet: var(--c-grey-100);
  /* Acento para SUPERFÍCIE ESCURA (`.secao--invert`, rodapé). Aqui o
     vermelho da MARCA finalmente serve como cor de interface: #FF1616 dá
     5,07 sobre #0A0A0A e passa, enquanto o #C20E14 do tema claro cai para
     3,17 e reprova. Cada vermelho no fundo em que funciona.
     Achado pela auditoria de contraste de 09/08/2026, que pegou a
     sobrancelha e o telefone da seção de contato reprovando. */
  --accent-invert: var(--c-red-brand);

  --ok:  #15803d;
  --bad: var(--c-red-600);

  /* ---- tipografia -------------------------------------------------------
     Duas famílias. O caráter técnico vem de CAIXA ALTA, tracking e algarismo
     tabular, não de acumular fonte. Cada família a mais é peso servido.
     ---------------------------------------------------------------------- */
  --font-display: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.25rem, 5.5vw, 4.25rem);
  --fs-h1:      clamp(1.875rem, 4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1rem, 1.5vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-display: 1.04;
  --lh-body:    1.6;

  --weight-display: 600;
  --weight-body:    400;
  --weight-strong:  600;

  --tracking-tight: -0.005em;
  --tracking-wide:   0.14em;
  --display-transform: uppercase;
  --eyebrow-transform: uppercase;

  /* ---- forma e espaço ---------------------------------------------------
     Canto vivo em tudo. Peça de metal não tem canto arredondado, e o raio 0
     é o que separa isto de mais um site claro genérico.
     ---------------------------------------------------------------------- */
  --radius:       0;
  --radius-small: 0;
  --radius-pill:  0;
  --border-width: 1px;
  --shadow:       none;
  --shadow-none:  none;

  --maxw:          78rem;
  --maxw-prosa:    68ch;
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --space-section: clamp(3rem, 8vw, 5.5rem);

  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur:      0.18s;
  --dur-slow: 0.4s;
}

/* ==========================================================================
   Assinaturas do sistema
   ========================================================================== */

/* 1. Título condensado em caixa alta — assinatura herdada do futureui. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: var(--display-transform);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-display);
  font-weight: var(--weight-display);
}

/* 2. Algarismo tabular em TODO dado numérico. Num catálogo de medidas
      (M6 x 40, 3/8", 178 x 1,6 x 22,2 mm) coluna desalinhada lê como
      desleixo — e desleixo é o que não pode, quando a objeção número 1 do
      cliente é "será que vocês têm a peça certa?". */
table, .medidas, .dado, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 3. Eyebrow / rótulo: o elemento de SINALIZAÇÃO, como placa de corredor de
      loja. Usar com parcimônia: se tudo sinaliza, nada sinaliza. */
.eyebrow, .rotulo {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: var(--eyebrow-transform);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-strong);
  color: var(--accent);
}

/* 4. Botão principal: bloco vermelho sólido, canto vivo, texto branco. Sem
      degradê e sem sombra — a cor sozinha é o sinal mais forte da página,
      porque é a única cor da página. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* 5. Botão secundário: só contorno, na cor que PASSA em contraste de
      componente — não na decorativa. */
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: var(--border-width) solid var(--border-interactive);
  border-radius: var(--radius);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* 6. Card de produto BRANCO sobre o cinza da página. É o que faz a peça
      saltar sem precisar de sombra, e é também por que o tema claro resolveu
      o problema que derrubou a versão escura: as fotos nasceram sobre branco. */
.card-produto {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.card-produto:hover { border-color: var(--accent); }

/* 6b. O FORMULÁRIO DENTRO DE SEÇÃO INVERTIDA.
      Bug real, pego em 09/08/2026 antes de publicar: a seção de contato é
      escura (`.secao--invert`), mas o formulário tem superfície clara
      própria. O `h2` dentro dele herdava a cor clara da seção e ficava
      #E6E6E6 sobre #E6E6E6 — contraste 1:1, texto invisível. O título
      "Qual peça você procura?" simplesmente não existia na tela.
      A regra abaixo devolve a cor de texto normal a tudo que está sobre a
      superfície clara do formulário. */
.secao--invert .form,
.secao--invert .form :where(h1, h2, h3, h4, p, label, strong, li) { color: var(--fg); }
.secao--invert .form :where(.form__apoio, .form__nota, .apoio) { color: var(--fg-muted); }
.secao--invert .form a:not(.btn) { color: var(--accent); }

/* 6c. Acento sobre superfície escura — usa o vermelho da marca, que só aqui
      passa em contraste (ver `--accent-invert`). Vale para a seção de
      contato e para o rodapé, MENOS o que está dentro do formulário, que
      tem superfície clara própria e já foi tratado acima. */
:where(.secao--invert, .rodape) :where(.sobrancelha, a:not(.btn)):not(.form *) {
  color: var(--accent-invert);
}

/* 7. Foco visível. Nunca remover: parte do público B2B navega por teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 8. Campo de formulário. O formulário é o único caminho de conversão do
      site — ele não pode parecer desligado. */
input, select, textarea {
  background: var(--bg-card);
  color: var(--fg);
  border: var(--border-width) solid var(--border-interactive);
  border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--fg-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* 9. Foto de produto dentro do card. O `padding` é o que impede a peça de
      encostar na borda — sem ele o card parece apertado. */
.card-produto img { display: block; width: 100%; height: auto; padding: 6%; }

/* 10. Logo. Altura fixa, largura automática: o arquivo é 438x435, quase
       quadrado, e esticar quebraria o quadrado vermelho da marca. */
.logo { display: block; height: 44px; width: auto; }

/* 11. Quem prefere menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}