@font-face {
  font-family: "Gatty";
  src: url("../fonts/Gatty-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta de marca (extraída dos arquivos oficiais de logotipo) */
  --color-red: #c61b28;
  --color-blue: #212170;
  --color-yellow: #fcce3a;
  --color-cream: #f7f1e8;

  /* Variáveis semânticas */
  --color-primary: var(--color-red);
  --color-secondary: var(--color-blue);
  --color-accent: var(--color-yellow);
  --color-background: var(--color-cream);

  --color-text: var(--color-blue);
  --color-text-on-dark: var(--color-cream);
  --color-text-on-red: var(--color-cream);
  --color-border: rgba(33, 33, 112, 0.2);

  --color-surface: #ffffff;
  --color-success: #1c7a3e;
  --color-error: var(--color-red);
  --color-text-on-yellow: var(--color-blue);

  /* Tipografia */
  --font-heading: "Gatty", Impact, sans-serif;
  --font-body:
    "Source Sans 3",
    "Segoe UI",
    Arial,
    sans-serif;

  --font-size-display: clamp(5rem, 14vw, 11rem);
  --font-size-h1: clamp(3.5rem, 8vw, 7.5rem);
  --font-size-h2: clamp(2.25rem, 5.5vw, 4rem);
  --font-size-h3: clamp(1.4rem, 3vw, 2rem);
  --font-size-h4: clamp(1.1rem, 1.6vw, 1.35rem);
  --font-size-lead: clamp(1.15rem, 2vw, 1.4rem);
  --font-size-eyebrow: 0.9rem;

  /* Layout */
  --container-width: 1200px;
  --container-width-wide: 1360px;
  --border-radius: 12px;
  --border-radius-lg: 24px;
  --section-spacing: clamp(3.5rem, 7vw, 6.5rem);

  /* Foco visível (acessibilidade) */
  --focus-ring: 3px solid var(--color-accent);
}