/* ==========================================================================
   Design tokens — GJM Tech
   Fonte da verdade: .claude/skills/design-system/SKILL.md
   ========================================================================== */

:root {
  /* --- Cores base --- */
  --bg-dark: #0A0A0A;
  --bg-dark-soft: #121214;
  --bg-white: #FFFFFF;
  --bg-card-light: #F3F3F4;

  --text-dark: #111111;
  --text-white: #FFFFFF;
  --text-muted: #6B6B6B;
  --text-muted-dark: #A0A0A0;

  --border-light: #E6E6E8;
  --border-dark: rgba(255, 255, 255, 0.10);

  /* Contorno de componente interativo (botão fantasma, campo de formulário).
     O hairline de --border-light some sobre o branco: fica em ~1.1:1. Estes
     ficam em ~3:1, o mínimo do WCAG para a borda de um controle. */
  --border-strong: rgba(17, 17, 17, 0.48);
  --border-strong-dark: rgba(255, 255, 255, 0.38);

  /* --- Marca (extraída das logos oficiais — azul, não o roxo do Revio) --- */
  --brand-primary: #0A63E0;
  --brand-primary-hover: #0850B8;
  --brand-bright: #3B8BFF;
  --brand-deep: #0D43A3;

  /* --- Botão principal (invertido em relação ao fundo) ---
     Padrão = superfície clara, então o botão é quase-preto.
     Sobre superfícies escuras, os 3 tokens são invertidos em components.css.
     O azul da marca deixa de ser cor de botão e fica só como acento. */
  --btn-bg: #111111;
  --btn-fg: #FFFFFF;
  --btn-bg-hover: #2C2C2E;

  /* --- Acentos (ícones de feature / decorativos) --- */
  --accent-mint: #9FD8D6;
  --accent-coral: #F4948F;
  --accent-green: #3FB68A;
  --accent-lavender: #D9C2FB;
  --accent-pink: #F3D6F5;
  --accent-grey-dark: #2C2C2E;

  /* --- Tipografia --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);      /* 36 → 64px */
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);      /* 28 → 48px */
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* 18 → 22px */
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);  /* 16 → 18px */
  --fs-small: 0.9375rem;                               /* 15px */
  --fs-label: 0.8125rem;                               /* 13px */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* --- Layout --- */
  --content-max: 1200px;
  --gutter: 24px;
  --gutter-desktop: 130px;

  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Ritmo vertical entre seções. Foi reduzido de 120px para 76px no desktop
     (2026-09-09): com 120px em cima e embaixo, sobravam ~240px de nada entre
     uma seção e outra, e o vazio passava a impressão de conteúdo faltando. */
  --section-py: clamp(44px, 2.75rem + 1.6vw, 76px);

  /* --- Sombras --- */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.35);

  /* --- Movimento --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;

  /* --- Header --- */
  --header-h: 76px;
}