/* ==========================================================================
   Hidro Vale — Design Tokens
   Fonte da verdade da marca. Nenhum componente deve declarar hex diretamente.

   As cores primárias foram extraídas dos vetores oficiais do logo
   (Logos Vetorizadas/LOGO PRINCIPAL.svg), não estimadas de mockup.
   Ver .claude/skills/hidro-vale-brand/SKILL.md
   ========================================================================== */

:root {
  /* --- Cores oficiais da marca (extraídas do logo) --- */
  --hv-navy-900: #001f39; /* sobreposição das duas primeiras gotas / wordmark */
  --hv-blue-800: #004f79; /* gota esquerda */
  --hv-teal-700: #006e76; /* sobreposição das duas últimas gotas */
  --hv-teal-600: #0095a1; /* gota central — acento primário */
  --hv-mint-400: #43c6b9; /* gota direita — acento claro */

  /* --- Neutras derivadas --- */
  --hv-slate-600: #55697a;
  --hv-slate-400: #8aa0ad;
  --hv-surface: #ffffff;
  --hv-surface-alt: #f2fafb;
  --hv-card-tint: #e8f6f7;
  --hv-border: #cbe6e9;

  /* --- Exceção documentada: cor de marca de terceiro --- */
  --hv-whatsapp: #25d366;

  /* --- Gradientes de marca --- */
  --hv-grad-hero: linear-gradient(180deg, #e6f6f8 0%, #f1fbfc 42%, #ffffff 100%);
  --hv-grad-btn: linear-gradient(100deg, var(--hv-blue-800) 0%, var(--hv-teal-600) 100%);
  --hv-grad-band: linear-gradient(115deg, var(--hv-navy-900) 0%, var(--hv-blue-800) 38%, var(--hv-teal-600) 72%, var(--hv-mint-400) 100%);
  --hv-grad-icon: linear-gradient(140deg, var(--hv-teal-600) 0%, var(--hv-mint-400) 100%);

  /* --- Tipografia --- */
  --font-display: "Funnel Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.6rem, 6vw, 4.2rem);
  --fs-h2: clamp(2rem, 4vw, 2.9rem);
  --fs-h3: 1.15rem;
  --fs-lead: 1.05rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.78rem;

  /* --- Espaçamento e forma --- */
  --space-section: clamp(72px, 9vw, 128px);
  --space-gap: 20px;
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --container: 1120px;

  /* --- Elevação --- */
  --shadow-sm: 0 1px 2px rgba(0, 31, 57, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(0, 31, 57, 0.2);
  --shadow-lg: 0 24px 60px -28px rgba(0, 31, 57, 0.34);

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