/*
 * GIP Suite — site gipsuite.com — tokens da landing v5 ("Papel branco, tinta navy, prova anotada").
 * GERADO a partir do frontmatter de site/DESIGN.md (paleta v4b; escala de tipos e de raios da v5, 07/10/2026):
 * nenhuma outra cor, tamanho de fonte ou raio entra no CSS do site. Transparências usam color-mix() sobre estes tokens.
 * Especificação: docs/lancamento/landing/conselho/diretor-de-arte-spec-v5-2026-10-07.md.
 */

/* Fontes hospedadas no próprio site (OFL 1.1; licenças em assets/fonts/) */
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/AlbertSans-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* O Design Lab declara "Inter" diretamente na pilha do Tailwind. Este alias procura a instalação local primeiro e,
   quando ela não existe, cai na mesma fonte do sistema — sem baixar outra face depois e trocar o desenho da marca. */
@font-face {
  font-family: 'Inter Local';
  src: local('Inter');
  font-weight: 100 900;
  font-style: normal;
}

/* Reservas sobre Arial para a troca de fonte não mexer no layout (CLS). Medido em 07/10/2026 no texto real:
   Albert Sans 650–700 = Arial Bold × 0,958–0,980 (H1, H2, enunciado, títulos) ⇒ 97%; métricas da Albert: upm 1000,
   ascent 950, descent 250 ⇒ overrides = métrica ÷ size-adjust. Inter: valores da v2. */
@font-face {
  font-family: 'Albert Reserva';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 800;
  size-adjust: 97%;
  ascent-override: 97.94%;
  descent-override: 25.77%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Albert Reserva';
  src: local('Arial'), local('ArialMT');
  font-weight: 400 599;
  size-adjust: 97%;
  ascent-override: 97.94%;
  descent-override: 25.77%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Reserva';
  src: local('Arial'), local('ArialMT');
  font-weight: 400 500;
  size-adjust: 106%;
  ascent-override: 91.39%;
  descent-override: 22.76%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Reserva';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 700;
  size-adjust: 101%;
  ascent-override: 95.92%;
  descent-override: 23.88%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Cores (DESIGN.md › colors) */
  --navy-50: #f5f7fb;
  --navy-100: #e9eef7;
  --navy-200: #d6deeb;
  --navy-300: #b6c2d5;
  --navy-400: #93a1b8;
  --navy-500: #61708a;
  --navy-600: #475773;
  --navy-700: #30415f;
  --navy-800: #1d2f4d;
  --navy-900: #0d1f3d;
  --marca-onyx: #1a1e26;
  --navy-950: #0a1426;
  --verde-50: #effcf2;
  --verde-100: #def9e4;
  --verde-200: #c2f1cc;
  --verde-300: #9ce6ab;
  --verde-400: #71d887;
  --verde-500: #34c759;
  --verde-600: #1f9d63;
  --verde-700: #157049;
  --verde-800: #0f5536;
  --verde-900: #083a23;
  --verde-950: #06210f;
  --verde-hover: #2fb350;
  --verde-ativo: #2ba349;
  --azul-50: #f4f9ff;
  --azul-100: #e8f1ff;
  --azul-200: #d1e4fe;
  --azul-300: #b3cdf6;
  --azul-400: #6aa8f0;
  --azul-500: #4988db;
  --azul-600: #2f6fc4;
  --azul-700: #275ca0;
  --azul-800: #1e4579;
  --azul-900: #153057;
  --azul-950: #0c1e39;
  --violeta-50: #f8f7ff;
  --violeta-100: #f0eeff;
  --violeta-200: #e1dcfe;
  --violeta-300: #cbc1fd;
  --violeta-400: #ae9df5;
  --violeta-500: #927ce1;
  --violeta-600: #775dc5;
  --violeta-700: #5f46a4;
  --violeta-800: #48357f;
  --violeta-900: #33245b;
  --violeta-950: #20163c;
  --ambar-50: #fff8ed;
  --ambar-100: #ffefd4;
  --ambar-200: #fbe0b1;
  --ambar-300: #ecd09a;
  --ambar-400: #e0a93b;
  --ambar-500: #c68c27;
  --ambar-600: #a9741a;
  --ambar-700: #855a12;
  --ambar-800: #65420e;
  --ambar-900: #462d0b;
  --ambar-950: #2d1b06;
  --vermelho-50: #fff4f5;
  --vermelho-100: #fee8ea;
  --vermelho-200: #fed3d7;
  --vermelho-300: #f5acb6;
  --vermelho-400: #f06a7e;
  --vermelho-500: #dc5467;
  --vermelho-600: #c83a52;
  --vermelho-700: #a12a40;
  --vermelho-800: #782130;
  --vermelho-900: #551821;
  --vermelho-950: #380d13;
  --branco: #ffffff;
  --tinta: #1a1e26;
  --tinta-2: #565d6a;
  --tinta-fraca: #969ca8;
  --filete: #e3e7ee;
  --borda-campo: #7d8494;
  --tela-produto: #e2e2e6;

  /* Tipos (DESIGN.md › typography: escala fechada de 12 tamanhos) */
  --f-titulo: 'Albert Sans', 'Albert Reserva', Arial, sans-serif;
  --f-texto: 'Inter', 'Inter Reserva', Arial, sans-serif;
  --f-marca:
    'Inter Local', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --fs-display: clamp(2rem, 1.45rem + 2.556vw, 3.75rem); /* 32 → 60 px */
  --fs-headline: clamp(2rem, 1.629rem + 1.524vw, 3rem); /* 32 → 48 px */
  --fs-headline-apoio: clamp(1.75rem, 1.564rem + 0.762vw, 2.25rem); /* 28 → 36 px */
  --fs-subtitulo-l: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem); /* 22 → 28 px */
  --fs-subtitulo-s: 1.125rem; /* 18 px */
  --fs-brand: 1.0625rem; /* 17 px */
  --fs-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem); /* 17 → 20 px */
  --fs-body: clamp(1rem, 0.976rem + 0.095vw, 1.0625rem); /* 16 → 17 px */
  --fs-label: 0.9375rem; /* 15 px */
  --fs-small: 0.875rem; /* 14 px */
  --fs-micro: 0.8125rem; /* 13 px */
  --fs-button: 1.0625rem; /* 17 px */

  /* Raios (DESIGN.md › rounded: escala fechada) */
  --r-caixa: 4px;
  --r-rotulo: 8px;
  --r-controle: 12px;
  --r-tela: 16px;
  --r-superficie: 28px;
  --r-pilula: 999px;

  /* Espaço (DESIGN.md › spacing, base 4) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Sombras (DESIGN.md › Shadow Vocabulary): só a tela e o cartão do formulário têm sombra */
  --sombra-tela: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 44px 90px -30px rgba(2, 6, 18, 0.85);
  --sombra-palco: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --sombra-cartao: 0 0 0 1px rgba(13, 31, 61, 0.08), 0 24px 48px -28px rgba(13, 31, 61, 0.22);

  /* Grade */
  --conteiner: 1200px;
  --margem: 20px;
  --cabecalho: 56px;
  --secao: 80px;

  /* Movimento */
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 600px) {
  :root {
    --margem: 32px;
  }
}
@media (min-width: 768px) {
  :root {
    --cabecalho: 64px;
  }
}
@media (min-width: 1024px) {
  :root {
    --margem: 48px;
    --secao: 128px;
  }
}
@media (min-width: 1280px) {
  :root {
    --margem: 40px; /* contêiner de 1200 px centrado */
  }
}