/* ============================================================
   DUO PRIME — DESIGN TOKENS v2.1
   Fonte: CLAUDE.md v2.1 (site-novo) — Seção 3.
   Uso: importar antes de qualquer CSS de componente.
   Regra de ouro: gold é AÇÃO/destaque — nunca fundo grande ou texto corrido.
   ============================================================ */

/* Mena Grotesk — fonte de produção, self-hosted (arquivos em ./fonts/mena-grotesk/).
   Decisão registrada: mantém self-hosted mesmo com o v2.1 citando Hanken Grotesk
   como "stand-in oficial" — texto herdado do v1 antes da Mena real ser resolvida. */
@font-face {
  font-family: 'Mena Grotesk';
  src: url('./fonts/mena-grotesk/MenaGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mena Grotesk';
  src: url('./fonts/mena-grotesk/MenaGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mena Grotesk';
  src: url('./fonts/mena-grotesk/MenaGrotesk-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mena Grotesk';
  src: url('./fonts/mena-grotesk/MenaGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mena Grotesk';
  src: url('./fonts/mena-grotesk/MenaGrotesk-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mena Grotesk';
  src: url('./fonts/mena-grotesk/MenaGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ---------- COR — primárias ---------- */
  --dp-navy: #152535;
  --dp-navy-rgb: 21, 37, 53;
  --dp-graphite: #364B60;
  --dp-graphite-rgb: 54, 75, 96;
  --dp-offwhite: #EDEAE2;
  --dp-offwhite-rgb: 237, 234, 226;
  --dp-gold: #C1935F;
  --dp-gold-rgb: 193, 147, 95;
  --dp-gold-line: var(--dp-gold);

  /* ---------- COR — intermediárias (v2.1, criam camada/profundidade) ---------- */
  --dp-paper: #F5F3ED;         /* fundo claro alternativo, alterna com off-white */
  --dp-navy-grad: #1B2E42;     /* fim de gradiente em seções navy */
  --dp-navy-raised: #1E3348;   /* superfície elevada (cards) sobre navy */
  --dp-white: #FFFFFF;
  --dp-line: rgba(21, 37, 53, 0.08);          /* hairline sobre fundo claro */
  --dp-line-dark: rgba(237, 234, 226, 0.12);  /* hairline sobre fundo escuro */

  /* Neutros derivados (opacidades sobre navy/off-white) */
  --dp-navy-muted: rgba(var(--dp-navy-rgb), 0.65);
  --dp-navy-faint: rgba(var(--dp-navy-rgb), 0.08);

  /* ---------- TIPOGRAFIA ---------- */
  --dp-font-display: 'Sora', Arial, sans-serif;
  --dp-font-display-weight: 700;

  /* Corpo — Mena Grotesk self-hosted (@font-face acima); Hanken Grotesk = fallback de carregamento */
  --dp-font-body: 'Mena Grotesk', 'Hanken Grotesk', Arial, sans-serif;
  --dp-font-body-weight-light: 300;
  --dp-font-body-weight-regular: 400;
  --dp-font-body-weight-italic: 400;

  /* Escala tipográfica — mobile-first (valores desktop via media query abaixo) */
  /* H1 mobile reduzido um degrau (era 36px) — sessão pós-P0 12/07/2026, pra caber
     em menos linhas a 390px sem tocar em copy. */
  --dp-text-h1: 28px;
  --dp-leading-h1: 1.15;
  --dp-text-h2: 28px;
  --dp-leading-h2: 1.15;
  --dp-text-h3: 20px;
  --dp-leading-h3: 1.3;
  --dp-text-body: 17px;
  --dp-text-body-sm: 14px;
  --dp-text-label: 13px; /* eyebrow */

  --dp-leading-tight: 1.18;
  --dp-leading-body: 1.65;
  --dp-tracking-label: 0.12em;

  /* ---------- ESPAÇAMENTO / GRID ---------- */
  --dp-space-section-desktop: 96px;
  --dp-space-section-mobile: 64px;
  --dp-space-section-compact-desktop: 64px;
  --dp-space-section-compact-mobile: 48px;
  --dp-space-block-gap: 32px;
  --dp-reading-width: 680px;
  --dp-container-width: 1240px;
  --dp-container-pad-mobile: 24px;
  --dp-container-pad-desktop: 48px;
  --dp-grid-columns: 12;
  --dp-grid-gutter: 24px;

  /* ---------- FORMA ---------- */
  --dp-radius-sm: 6px;   /* botões */
  --dp-radius-md: 8px;   /* cards */
  --dp-border-hairline: 1px solid var(--dp-line);

  /* ---------- MOTION ---------- */
  --dp-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dp-transition-fast: 0.2s var(--dp-ease);
  --dp-transition-base: 0.32s var(--dp-ease);
  --dp-transition-card: 0.25s ease;
  --dp-transition-reveal: 0.5s var(--dp-ease);

  /* ---------- SOMBRA ---------- */
  --dp-shadow-card: 0 2px 12px rgba(var(--dp-navy-rgb), 0.06);
  --dp-shadow-hover: 0 8px 24px rgba(var(--dp-navy-rgb), 0.12);
  --dp-shadow-sm: var(--dp-shadow-card);
  --dp-shadow-md: var(--dp-shadow-hover);
}

@media (min-width: 1024px) {
  :root {
    --dp-text-h1: 56px;
    --dp-text-h2: 40px;
    --dp-text-h3: 24px;
  }
}

/* ============================================================
   NOTAS DE GOVERNANÇA (não remover)
   - Gold = AÇÃO/destaque (CTA primário, eyebrow, hairlines, hover). Nunca
     cor de fundo de bloco/seção inteira nem texto corrido.
   - Ritmo de fundos (CLAUDE.md v2.1 §5): máx. 2 seções claras consecutivas
     com o mesmo fundo; navy sempre com gradiente (--dp-navy → --dp-navy-grad),
     nunca chapado.
   - Fotos dos sócios: tratamento duotone navy (Kairogen), sem stock clichê.
   - Mena Grotesk é self-hosted (arquivos .otf em ./fonts/mena-grotesk/);
     manter os arquivos junto deste tokens.css ao mover/publicar o projeto.
   - Qualquer novo token deve ser adicionado aqui, nunca hardcoded
     inline nos componentes.
   ============================================================ */