/* ============================================================================
   tokens.css — Design tokens do Prêmio ClienteSA Happy
   Extraídos de design-system.html (fonte de verdade do design).
   A landing page consome EXCLUSIVAMENTE estes tokens.

   Extensões adicionadas para a LP (coerentes com o design system):
   - Escala de espaçamento nomeada (--space-*) derivada do uso de padding/gap
     do design system (Tailwind: 4/6/8/10/12/16/24 -> rem).
   - Escala tipográfica fluida (clamp) baseada nos tamanhos text-4xl..text-8xl.
   - Tokens de sombra/brilho nomeados a partir das sombras inline do DS.
   - Keyframes reaproveitados do design system (fade-up, reveal, marquee, etc.).
   ========================================================================== */

/* Fontes do design system: Space Grotesk (display), Inter (corpo), Space Mono (mono) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Cores da marca (logo Happy ClienteSA) ---- */
  --navy: #010642;
  --navy-hover: #0B1466;
  --gold: #F0D048;
  --gold-hover: #E0BE2E;
  --gold-deep: #B8901E;        /* dourado escuro legível sobre fundo claro */

  /* ---- Superfícies / neutros ---- */
  --sand: #FBF9F3;             /* fundo base */
  --white: #FFFFFF;            /* cards */
  --border: #E7E1D2;           /* bordas/divisores */

  /* ---- Texto ---- */
  --text: #3F4458;            /* corpo */
  --text-strong: #010642;      /* títulos / texto forte */
  --text-muted: #6B6F84;       /* secundário */
  --text-faint: #9A9DB0;       /* miúdo / legendas */
  --on-navy: #FFFFFF;          /* texto sobre marinho */
  --on-gold: #010642;          /* texto sobre dourado */

  /* ---- Tipografia ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --fs-display: clamp(2.5rem, 7vw, 6rem);     /* hero (40 -> 96px) */
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);      /* 36 -> 60px */
  --fs-h2: clamp(2rem, 4vw, 3rem);            /* 32 -> 48px */
  --fs-h3: clamp(1.5rem, 3vw, 2.25rem);       /* 24 -> 36px */
  --fs-h4: 1.125rem;                          /* 18px */
  --fs-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                            /* 16px */
  --fs-sm: 0.875rem;                          /* 14px */
  --fs-xs: 0.75rem;                           /* 12px */
  --fs-stat: clamp(3rem, 8vw, 6rem);          /* contadores */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;

  /* ---- Espaçamento ---- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: 6rem;       /* ritmo entre seções (sm:py-32 do DS) */

  /* ---- Raios ---- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;           /* rounded-2xl */
  --radius-lg: 1.5rem;         /* rounded-3xl */
  --radius-full: 9999px;

  /* ---- Sombras / brilhos ---- */
  --shadow-sm: 0 4px 16px -8px rgba(1, 6, 66, 0.12);
  --shadow-card: 0 8px 30px -12px rgba(1, 6, 66, 0.15);
  --shadow-lg: 0 20px 50px -20px rgba(1, 6, 66, 0.20);
  --glow-gold: 0 0 20px rgba(240, 208, 72, 0.35);
  --glow-gold-strong: 0 0 30px rgba(240, 208, 72, 0.60);

  /* ---- Layout ---- */
  --container-max: 80rem;      /* max-w-7xl */
  --container-pad: 1.25rem;
  --header-h: 6.5rem;

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.8s;
  --t-fast: 300ms;
}

/* ---- Keyframes reaproveitados do design system ---- */
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes accordionFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scanner {
  0%, 100% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes spin360 { to { transform: rotate(360deg); } }
@keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Background pan — efeito de entrada do hero.
   Gerado no Animista (2026-06-30), licença FreeBSD. w: http://animista.net */
.bg-pan-top { -webkit-animation: bg-pan-top 8s both; animation: bg-pan-top 8s both; }
@-webkit-keyframes bg-pan-top { 0% { background-position: 50% 100%; } 100% { background-position: 50% 0; } }
@keyframes bg-pan-top { 0% { background-position: 50% 100%; } 100% { background-position: 50% 0; } }

/* Hero dinâmico: gradiente das cores da marca em movimento contínuo (color change) */
@keyframes heroShift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 40%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 60%; }
  100% { background-position: 0% 0%; }
}
@keyframes heroGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.28; }
  50%      { transform: translate(-42px, 36px) scale(1.28); opacity: 0.52; }
}