/* assets/css/design-system.css — Tokens do design system: paleta de cores, escala de fonte e fontes self-hosted. */

/* =====================================================
   PALETA DO STIEEN (enxugada em 2026-09-24) — 18 cores sólidas e
   3 transparências. REGRA: nenhuma cor solta (#xxxxxx / rgba) fora
   deste arquivo; todo o resto do CSS chama var(--nome). Trocar uma
   cor aqui (ou, no futuro, pelo Editor de Cores do Painel) muda o
   site inteiro. Não criar tom novo sem necessidade: reaproveitar um
   destes.
   ===================================================== */
:root {
  /* --- As 4 cores oficiais --- */
  --stieen-branco: #ffffff;
  --stieen-vermelho: #ba0000;
  --stieen-escuro: #181818;        /* o "preto" do Stieen (rodapé, faixas escuras) */
  --stieen-cinza: #595959;         /* texto corrente e títulos em cinza */

  /* --- Variações do vermelho (só 2) --- */
  --stieen-vermelho-vivo: #ff3b30;   /* vermelho sobre fundo escuro (rodapé): o padrão perde contraste no preto */
  --stieen-vermelho-escuro: #950000; /* hover de botões vermelhos */

  /* --- Cinzas sobre fundo claro --- */
  --stieen-cinza-medio: #777777;   /* texto secundário: datas, breadcrumb, ícones discretos */
  --stieen-cinza-claro: #f7f7f7;   /* fundo de seções alternadas */
  --stieen-cinza-borda: #e4e4e4;   /* bordas, divisórias e quadros vazios */

  /* --- Cinzas e escuros do modo escuro / faixas escuras --- */
  --stieen-claro: #f0f0f0;         /* texto forte sobre fundo escuro */
  --stieen-cinza-suave: #bbbbbb;   /* texto secundário sobre fundo escuro */
  --stieen-borda-escura: #333333;  /* bordas e divisórias sobre fundo escuro */
  --stieen-escuro-fundo: #121212;  /* fundo da página no modo escuro */
  --stieen-escuro-card: #1c1c1c;   /* cards, menus e topos no modo escuro */
  --stieen-escuro-elevado: #2a2a2a; /* botões redondos, hover e seções sobre escuro */

  /* --- Estados --- */
  --stieen-sucesso: #1a8a3c;
  --stieen-sucesso-fundo: #e5f7ea;
  --stieen-erro-fundo: #fde8e8;    /* texto do erro usa --stieen-vermelho */

  /* --- Transparências (só uma de cada) --- */
  --stieen-veu-escuro: rgba(0,0,0,.92);      /* fundo dos lightboxes e véus escuros */
  --stieen-veu-claro: rgba(255,255,255,.55); /* véu branco (hero no celular, bolinhas do slider) */
  --stieen-sombra: rgba(0,0,0,.15);          /* todas as sombras */

  --stieen-escala-fonte: 1; /* alternada pelo widget de acessibilidade (A- A A+) */
}

/* Assistant Bold — fonte PADRÃO de título do site a partir de agora
   (pedido do Luciano), self-hosted (não é Google Fonts). Só existe o
   peso Bold de verdade (o arquivo já é bold por natureza), então o
   @font-face declara uma FAIXA de peso (100 900): qualquer font-weight
   pedido nos títulos (600, 700, 800...) usa esse mesmo arquivo, sem o
   navegador tentar "negritar" artificialmente por não achar o peso
   exato. */
@font-face {
  font-family: 'Assistant';
  src: url('../fonts/assistant/Assistant-Bold.woff2?v=2') format('woff2'),
       url('../fonts/assistant/Assistant-Bold.ttf?v=2') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter — fonte do corpo do site, self-hosted (não é mais Google Fonts
   CDN). Arquivo único é um variable font (eixo wght 100-900, subset
   latin — cobre todos os acentos do português), então a faixa 100 900
   cobre os pesos 400/500/600 usados no site com um navegador só
   baixando um arquivo. Migrado em 2026-09-10 pra zerar dependência
   externa de fontes (pedido do Luciano: reduzir requests externos
   pra melhorar nota no GTmetrix). */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}