/* ============================================================
   Cargo MGA - Design Tokens (fonte da verdade)
   Cores e tipografia conforme CMGA_StyleGuide_vertical.pdf.
   Importe este arquivo em qualquer artefato (mock, slide, HTML).
   ============================================================ */

/* ---------- Inter (self-hosted) ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Marca / Primary (verde) - PDF ---------- */
  --primary:        #0BA25B;  /* verde da marca - CTAs, links, destaques */
  --primary-light:  #36C27D;  /* verde claro */
  --primary-dark:   #088245;  /* hover / pressionado */
  --primary-tint:   #CEE3D9;  /* realce/fundo sutil em verde */

  /* ---------- Secondary (azul) - PDF ---------- */
  --secondary:        #00557E;
  --secondary-light:  #2179A0;
  --secondary-dark:   #003D5C;

  /* ---------- Neutros - PDF ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9F9F9;
  --neutral-100: #F0F0F0;
  --neutral-200: #E0E0E0;
  --neutral-300: #C6C6C6;
  --neutral-400: #A8A8A8;
  --neutral-500: #777777;
  --neutral-600: #5F5F5F;
  --neutral-700: #4A4A4A;
  --neutral-800: #2E2E2E;
  --neutral-900: #1A1A1A;

  /* ---------- Feedback - PDF ---------- */
  --success: #0BA25B; --success-light: #D4F4E2; --success-dark: #088245;
  --warning: #F59E0B; --warning-light: #FEF3C7; --warning-dark: #B45309;
  --error:   #DC2626; --error-light:   #FFE8E8; --error-dark:   #991B1B;
  --info:    #00557E; --info-light:    #DBEAFE; --info-dark:    #003D5C;

  /* ---------- Semânticos ---------- */
  --bg:        var(--neutral-0);
  --bg-subtle: var(--neutral-50);
  --bg-muted:  var(--neutral-100);
  --fg:        var(--neutral-900);  /* texto principal */
  --fg-strong: var(--neutral-800);  /* títulos */
  --fg-muted:  var(--neutral-600);  /* texto secundário */
  --fg-subtle: var(--neutral-500);  /* auxiliar / placeholder */
  --fg-on-brand:#FFFFFF;
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ---------- Tipografia - PDF (Inter) ---------- */
  /* Verdana logo após o Inter: fallback para e-mails HTML, onde @font-face quase nunca carrega - cai numa fonte legível conhecida em vez de uma aleatória do cliente */
  --font-sans:  "Inter", Verdana, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* tabular: IDs, CNPJ */

  /* Hierarquia (size / line-height / weight / tracking) */
  --h1-size: 48px; --h1-lh: 60px; --h1-weight: 700; --h1-tracking: -0.01em;
  --h2-size: 36px; --h2-lh: 44px; --h2-weight: 700; --h2-tracking: -0.01em;
  --h3-size: 28px; --h3-lh: 36px; --h3-weight: 600;
  --h4-size: 24px; --h4-lh: 32px; --h4-weight: 600;
  --h5-size: 20px; --h5-lh: 28px; --h5-weight: 600;
  --h6-size: 18px; --h6-lh: 24px; --h6-weight: 600;
  --body-lg-size: 18px; --body-lg-lh: 28px;
  --body-size:    16px; --body-lh:    24px;
  --body-sm-size: 14px; --body-sm-lh: 20px;
  --caption-size: 12px; --caption-lh: 16px;
  --button-tracking: 1.25px;   /* botões: UPPERCASE, 600 · tracking do PDF */

  /* ---------- Espaçamento (grid 8pt) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px;

  /* ---------- Raios ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;   /* chips / controles pequenos */
  --radius-md: 8px;   /* inputs, botões, tabelas, modais */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Sombras (sutis, pretas, baixa opacidade) ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);   /* card padrão */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);    /* hover / menus / popovers */
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.10);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
}

/* ============================================================
   Base + utilitários
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { margin: 0; color: var(--fg-strong); }
h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-sans); letter-spacing: var(--h1-tracking); }
h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-sans); letter-spacing: var(--h2-tracking); }
h3 { font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-sans); }
h4 { font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-sans); }
h5 { font: var(--h5-weight) var(--h5-size)/var(--h5-lh) var(--font-sans); }
h6 { font: var(--h6-weight) var(--h6-size)/var(--h6-lh) var(--font-sans); }
p { margin: 0; }
.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.caption { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-muted); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-muted); }

/* Números - padrão Cargo MGA: sem casa decimal. 12.345.679, R$ 12.345.679, R$ 9M.
   tabular-nums alinha as colunas de dígitos; nowrap impede que "R$" caia sozinho
   numa linha e o valor na seguinte. Aplique em todo número exibido. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* Em tabela, coluna de número/valor vai à direita (cabeçalho junto). */
td.num, th.num { text-align: right; }

/* Assinatura de botão da marca: UPPERCASE, 600 */
.btn-label {
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 20px;
  letter-spacing: var(--button-tracking); text-transform: uppercase;
}
/* Card padrão: borda hairline + raio 12, sombra sutil opcional */
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: none; }
.card--subtle { background: var(--bg-subtle); }