/* =========================================================
   RISCA BARBEARIA — tokens de identidade visual
   (cliente FICTÍCIO — modelo demo da p.ontu)
   Copie este arquivo para o site e use SEMPRE estas variáveis.
   ========================================================= */

/* Fontes (licença SIL Open Font License — ver pasta fontes/) */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fontes/bricolage-grotesque-display.woff") format("woff");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fontes/instrument-sans.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Cor primária (SÓ para o que é clicável) ---- */
  --laranja-navalha: #CC4419;      /* HSB 14/88/80 — botões, CTAs, item ativo. Texto branco 4,76:1 */
  --laranja-navalha-forte: #A93813;/* hover/pressionado e LINKS em texto (5,52:1 no papel) */

  /* ---- Escala do professor (matiz 14, saturação 10, varia o brilho) ---- */
  --tinta: #1A1817;        /* B10 — títulos, fundos escuros */
  --carvao: #332F2E;       /* B20 — texto corrido (11,34:1 no papel) */
  --cinza: #6B6360;        /* B42* — textos de apoio, dicas dentro dos campos, bordas de campos (5,03:1 no papel) */
  --cinza-claro: #B2A5A1;  /* B70 — divisórias; texto sobre --tinta (7,41:1) */
  --areia: #E6D4CF;        /* B90 — fundos de cards e faixas sutis */
  --papel: #F5ECE4;        /* fundo principal da página */
  --branco: #FFFFFF;

  /* ---- Cor decorativa (NUNCA em botão, link ou item clicável) ---- */
  --azul-poste: #2F4B7C;   /* listras, ilustrações, selos. Texto branco 8,68:1 */

  /* ---- Feedback de formulário ---- */
  --erro: #B42318;
  --sucesso: #1E7B46;

  /* ---- Tipografia ---- */
  --fonte-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --fonte-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala (mobile → desktop, fluida) */
  --t-gigante: clamp(3.5rem, 13vw, 10rem);  /* hero, palavras-imagem */
  --t-h1: clamp(2.5rem, 7vw, 4.5rem);
  --t-h2: clamp(2rem, 5vw, 3.25rem);
  --t-h3: clamp(1.375rem, 2.6vw, 1.75rem);
  --t-texto: clamp(1rem, 1.1vw, 1.125rem);  /* mínimo 16px */
  --t-pequeno: 0.875rem;                    /* só para rótulos curtos, nunca parágrafos */
  --lh-titulo: 1.05;   /* display gigante */
  --lh-h: 1.3;         /* títulos (regra do professor) */
  --lh-texto: 1.6;     /* texto corrido (regra do professor) */
  --medida: 65ch;      /* 40–80 caracteres por linha */

  /* ---- Espaços (múltiplos de 4) ---- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px;
  --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px;

  /* ---- Formas ---- */
  --raio-botao: 999px;   /* botões em pílula */
  --raio-card: 6px;      /* comandas quase retas */
  --borda: 1.5px solid var(--tinta);
  --sombra: 0 1px 0 rgba(26,24,23,.06), 0 12px 32px -12px rgba(26,24,23,.28);

  /* ---- Elemento-assinatura ---- */
  --angulo-risca: -7deg; /* mesma inclinação do corte da logo (sobe para a direita) */

  /* ---- Movimento ---- */
  --rapido: 160ms;
  --medio: 280ms;
  --lento: 700ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --toque: 48px; /* área mínima de toque */
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --medio: 0ms; --lento: 0ms; }
}