/* ============================================================
   INVISIA · DESIGN TOKENS
   Extraído de https://lp.byinvisia.com.br/ — versão Vibrant Violet
   Use estas variáveis em qualquer página do funil de quiz para
   manter consistência total com a landing page principal.
   ============================================================ */

:root {
  /* ---------- CORES · Base Onyx ---------- */
  --inv-onyx:        #000000;   /* fundo absoluto */
  --inv-onyx-2:      #08080C;   /* fundo seções escuras */
  --inv-onyx-3:      #0E0E15;   /* cards base */

  /* ---------- CORES · Família Roxo INVISIA ---------- */
  --inv-midnight:    #2D1B69;   /* roxo profundo */
  --inv-medium:      #6B4FA0;   /* roxo médio */
  --inv-glow:        #C4A8FF;   /* lilás glow (assinatura) */
  --inv-cloud:       #DDD5F3;   /* lilás claríssimo */
  --inv-off-white:   #F5F0EB;   /* texto principal */

  /* ---------- CORES · Vibrant Violet (CTA / dramatic) ---------- */
  --inv-violet:        #A855F7;
  --inv-violet-light:  #C98BFF;
  --inv-violet-dark:   #7E22CE;
  --inv-violet-deep:   #5B0E9E;

  /* ---------- TEXTO ---------- */
  --text-primary:    #F5F0EB;
  --text-secondary:  #A8A3B8;
  --text-muted:      #6B6577;
  --text-accent:     var(--inv-glow);

  /* ---------- GRADIENTES ---------- */
  --grad-brand:       linear-gradient(135deg, var(--inv-onyx) 0%, var(--inv-midnight) 50%, var(--inv-glow) 100%);
  --grad-text:        linear-gradient(135deg, var(--inv-glow) 0%, var(--inv-medium) 100%);
  --grad-text-soft:   linear-gradient(135deg, var(--inv-glow) 0%, var(--inv-cloud) 100%);
  --grad-glow:        linear-gradient(135deg, var(--inv-glow) 0%, var(--inv-midnight) 100%);
  --grad-violet:      linear-gradient(135deg, var(--inv-violet-light) 0%, var(--inv-violet-dark) 100%);
  --grad-violet-text: linear-gradient(135deg, var(--inv-violet-light), var(--inv-violet) 50%, var(--inv-violet-dark));
  --grad-radial-hero: radial-gradient(ellipse at top, rgba(107, 79, 160, 0.35) 0%, transparent 60%);
  --grad-card:        linear-gradient(rgba(45, 27, 105, 0.10), rgba(14, 14, 21, 0.55));
  --grad-card-hover:  linear-gradient(135deg, rgba(196, 168, 255, 0.15) 0%, rgba(45, 27, 105, 0.05) 100%);
  --grad-body-bg:     radial-gradient(80% 50% at 50% -20%, rgba(107, 79, 160, 0.15), transparent),
                      radial-gradient(60% 40% at 50% 120%, rgba(45, 27, 105, 0.20), transparent);

  /* ---------- GLASS / SUPERFÍCIES ---------- */
  --glass-bg:         rgba(255, 255, 255, 0.04);
  --glass-bg-strong:  rgba(255, 255, 255, 0.07);
  --glass-border:     rgba(255, 255, 255, 0.08);
  --glass-border-hi:  rgba(196, 168, 255, 0.20);
  --glass-blur:       20px;

  /* ---------- ESPAÇAMENTO ---------- */
  --space-xs:   0.5rem;   /* 8 */
  --space-sm:   1rem;     /* 16 */
  --space-md:   1.5rem;   /* 24 */
  --space-lg:   2rem;     /* 32 */
  --space-xl:   3rem;     /* 48 */
  --space-2xl:  5rem;     /* 80 */
  --space-3xl:  8rem;     /* 128 */

  /* ---------- RAIO ---------- */
  --radius-sm:   0.5rem;    /* 8  · pílulas pequenas */
  --radius-md:   0.75rem;   /* 12 */
  --radius-lg:   1rem;      /* 16 */
  --radius-xl:   1.125rem;  /* 18 · solucao-card */
  --radius-2xl:  1.5rem;    /* 24 · case/team/pilar/dor card */
  --radius-pill: 999px;     /* botões e chips */

  /* ---------- SOMBRAS ---------- */
  --shadow-glow:     0 0 40px rgba(196, 168, 255, 0.18);
  --shadow-glow-hi:  0 0 60px rgba(196, 168, 255, 0.30);
  --shadow-card:     0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-btn:
      0 0 40px rgba(196, 168, 255, 0.18),
      0 10px 30px rgba(45, 27, 105, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --shadow-btn-hover-violet:
      0 0 90px rgba(168, 85, 247, 0.50),
      0 20px 45px rgba(126, 34, 206, 0.60),
      inset 0 1px 0 rgba(255, 255, 255, 0.50);
  --shadow-violet-glow: 0 0 28px rgba(168, 85, 247, 0.55);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Escala — valores literais que a LP usa */
  --fs-eyebrow:  0.75rem;     /* 12  · uppercase, tracking 2.16px */
  --fs-body:     1rem;        /* 16 */
  --fs-body-lg:  1.22rem;     /* 19.52 */
  --fs-h3:       1.22rem;     /* 19.52 */
  --fs-h2:       3.25rem;     /* 52 */
  --fs-h1:       4.8rem;      /* 76.8 */
  --fs-hero-num: 5.5rem;      /* 88 · economia-total-number */
  --fs-pct:      5rem;        /* 80 · dado-pct */

  /* Pesos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* Tracking (letter-spacing) */
  --tracking-eyebrow:  0.18em;     /* 2.16px @12 */
  --tracking-tight:    -0.01em;
  --tracking-tighter:  -0.02em;
  --tracking-tightest: -0.04em;    /* h1 / hero numbers */

  /* ---------- MOVIMENTO ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.2s;
  --dur-base:    0.4s;
  --dur-slow:    0.6s;
  --dur-slower:  0.9s;

  /* ---------- CORES SOLUÇÕES (auxiliares) ---------- */
  --sol-green:  #10B981;
  --sol-amber:  #F59E0B;
  --sol-blue:   #3B82F6;
  --sol-red:    #EF4444;
  --sol-wa:     #25D366;
  --sol-wa-dk:  #128C7E;
  --sol-fb:     #1877F2;
  --sol-yt:     #FF0033;
  --sol-li:     #0A66C2;
  --sol-tiktok: #00F2EA;

  /* ---------- HEADER ---------- */
  --header-height:    80px;
  --header-bg:        rgba(0, 0, 0, 0.72);
  --header-blur:      blur(20px) saturate(1.8);

  /* ---------- LAYOUT ---------- */
  --container-max:    1200px;
  --container-pad:    clamp(1rem, 4vw, 2rem);
}