/* ============================================================
   Sou Leão do Norte — Design Tokens (rebranding 2026)
   Paleta 100% da marca, sem preto/branco puros.
   ============================================================ */
:root {
  /* Cores da marca */
  --azul: #153C5B;            /* Direção Criativa — cor predominante */
  --azul-profundo: #0E2A40;   /* derivado: profundidade, footer, overlays */
  --azul-elevado: #1D4A6D;    /* derivado: superfícies elevadas sobre azul */
  --creme: #FEF1E1;           /* Raiz — texto sobre azul, superfícies claras */
  --creme-suave: #F7E6D0;     /* derivado: bordas/hover sobre creme */
  --terracota: #E04934;       /* Potência — CTAs e destaques */
  --terracota-escura: #C23A28;
  --verde: #2B7746;           /* Cultural — acentos */
  --ocre: #D98C3D;            /* Apoio/Ochra — tags e detalhes */

  /* Transparências de trabalho */
  --creme-08: rgba(254, 241, 225, .08);
  --creme-12: rgba(254, 241, 225, .12);
  --creme-20: rgba(254, 241, 225, .2);
  --creme-40: rgba(254, 241, 225, .4);
  --creme-60: rgba(254, 241, 225, .6);
  --creme-70: rgba(254, 241, 225, .7);
  --azul-08: rgba(21, 60, 91, .08);
  --azul-15: rgba(21, 60, 91, .15);

  /* Tipografia */
  --font: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala */
  --container: 1240px;
  --gutter: 24px;
  --sec-y: clamp(72px, 10vw, 132px);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --shadow-1: 0 10px 30px rgba(14, 42, 64, .12);
  --shadow-2: 0 24px 60px rgba(14, 42, 64, .22);

  --ease: cubic-bezier(.22, .8, .3, 1);
  --tr: .3s var(--ease);
}