/* ============================================================
   UNIÃO CONTADORES — Design System (variáveis + fontes)
   Cores derivadas do logotipo oficial fornecido pelo cliente:
   azul-petróleo, dourado, branco e grafite.
   ============================================================ */

/* ---------- Fonte self-hosted (woff2, subset latin) ----------
   Instrument Sans — humanista, limpa e adequada a interfaces
   corporativas atuais.                                           */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Cores institucionais */
  --color-primary: #004A67;        /* azul-petróleo institucional */
  --color-primary-dark: #01374E;
  --color-primary-deep: #0B2836;   /* fundos escuros / hero */
  --color-secondary: #DE9721;      /* dourado institucional */
  --color-secondary-soft: #F3C978;
  --color-secondary-dark: #A96F0E; /* dourado p/ texto (contraste AA) */
  --color-background: #FFFFFF;
  --color-surface: #F4F7F8;
  --color-text: #16202A;
  --color-text-muted: #53616A;
  --color-border: #E3EAEE;
  --color-success: #1E7B4F;
  --color-error: #B3261E;

  /* Sombras — suaves e difusas (substituem bordas duras) */
  --shadow-sm: 0 1px 2px rgba(11,40,54,.05), 0 4px 14px rgba(11,40,54,.06);
  --shadow-md: 0 2px 6px rgba(11,40,54,.05), 0 14px 34px rgba(11,40,54,.10);
  --shadow-lg: 0 6px 16px rgba(11,40,54,.08), 0 28px 60px rgba(11,40,54,.16);

  /* Raios — cantos generosos, nada "quadrado" */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Layout */
  --container-width: 1160px;
  --container-narrow: 820px;
  --section-y: clamp(4rem, 9vw, 6.75rem);

  /* Tipografia */
  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;

  /* Transições */
  --transition-fast: 180ms ease;
  --transition-normal: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}