/* Tokens da identidade visual TIMPONE (Drive: 05_Marketing e Identidade Visual /
   Paleta, Tipografia e Manual de Marca). O resto do CSS usa só os nomes semânticos.
   Contrastes calculados pela fórmula WCAG 2.x; ver docs/DESIGN.md. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Paleta da marca */
  --azure: #033649;      /* Azure Escuro: títulos, botão primário, links, faixas escuras */
  --navy: #363F5E;       /* Azul Apagado: botão secundário, rodapé */
  --olive: #808000;      /* Verde Ardósia: filetes e números grandes (nunca texto pequeno) */
  --gold: #D2A54E;       /* Dourado: só detalhes sobre fundo escuro */
  --slate: #566981;      /* Azul Acinzentado: texto auxiliar */
  --brown: #4A4142;      /* Marrom-cinza: texto corrido */
  --paper: #F7F5EF;      /* Off-white: fundo */
  --sage: #A8B9A5;       /* Verde Apagado: estado positivo, detalhe sobre escuro */

  /* Papéis */
  --primary: var(--azure);
  --primary-hover: #022634;
  --secondary: var(--navy);
  --accent: var(--olive);
  --bg: var(--paper);
  --surface: #FFFFFF;
  --dark: var(--azure);
  --on-dark: var(--paper);
  --ink: var(--brown);             /* 9,1:1 sobre --bg */
  --heading: var(--azure);         /* 11,8:1 sobre --bg */
  --ink-muted: var(--slate);       /* 5,2:1 sobre --bg; 5,6:1 sobre branco */
  --line: #D9D4C7;                 /* linhas de grade (cor funcional do manual) */
  --line-strong: var(--slate);     /* borda de campo, 5,2:1 */
  --focus: var(--azure);
  --soft-ok: #E3EBE1;              /* positivo claro (funcional) */
  --soft-warn: #F3E6C8;            /* atenção (funcional) */
  --soft-alert: #F2D9D0;           /* alerta (funcional) */
  --alert-ink: #9A4A32;            /* terracota escurecido: #B5654A do manual dá só 4,3:1 como texto */
  --error: #9A4A32;
  --success: #3F5A3B;
  --ph: #F3E6C8;                   /* destaque de placeholder, só na prévia */

  /* Tipografia */
  --font-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;
  --fs-display: 1.875rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.1875rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espaço (base 8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  --section: 56px;
  --measure: 40rem;
  --max: 70rem;

  /* Forma */
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;
  --shadow: 0 8px 24px rgb(3 54 73 / .10);

  --tap: 52px;
  --t-fast: 150ms;
}

@media (min-width: 390px) {
  :root { --gutter: 20px; }
}
@media (min-width: 768px) {
  :root {
    --fs-display: 2.375rem;
    --fs-h2: 1.875rem;
    --fs-h3: 1.3125rem;
    --fs-lead: 1.1875rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --gutter: 32px;
    --section: 96px;
  }
}
@media (min-width: 1024px) {
  :root { --fs-display: 2.75rem; --fs-h2: 2rem; }
}