@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
}

:root {
  /* Superfícies (tema claro) */
  --bg: #f5f5f6;
  --surface: #ffffff;
  --surface-2: #ececee;
  --surface-3: #e2e2e6;

  /* Texto */
  --text: #141416;
  --text-muted: #3f3f46;
  --text-faint: #71717a;

  /* Divisórias */
  --line: rgba(20, 20, 22, 0.1);
  --line-strong: rgba(20, 20, 22, 0.18);

  /* Acento único (vermelho da logo) */
  --red: #e11d2e;
  --red-bright: #c41020;
  --red-dim: rgba(225, 29, 46, 0.1);

  /* Seções de destaque / rodapé (grafite) */
  --ink: #141416;
  --ink-surface: #1a1a1d;
  --text-on-ink: #f5f5f4;
  --text-on-ink-muted: #a1a1aa;
  --text-on-ink-faint: #8a8a8f;
  --line-on-ink: rgba(255, 255, 255, 0.1);
  --line-on-ink-strong: rgba(255, 255, 255, 0.18);

  /* Tipografia */
  --font-display: 'Archivo', Arial, sans-serif;
  --font-body: 'Manrope', Arial, sans-serif;

  /* Layout */
  --container: 1420px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 120px);
  --header-height: 98px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-header: 30;
  --z-skip: 50;
}