/* ============================================================================
   GeradorXML · Design Tokens — Landing Page (index.html)
   ----------------------------------------------------------------------------
   Fonte única de cor, tipografia e espaçamento da LP. Extraídos do CSS inline
   de index.html SEM alterar nenhum valor — a renderização é idêntica.

   • Os nomes de cor originais (--bg, --s1, --g, --t, …) foram PRESERVADOS
     exatamente, então todas as regras existentes que usam var(--g) etc.
     continuam funcionando sem qualquer mudança.
   • Os tokens de tipografia (--font-*, --fw-*, --fs-*, --lh-*, --ls-*),
     espaçamento (--space-*, --section-*, --gutter, --container), raio
     (--radius-*) e sombra/brilho (--shadow-*) foram catalogados a partir dos
     valores já usados no arquivo, prontos para serem aplicados nas regras
     numa etapa posterior (esta etapa é só a extração, sem tocar em lógica).
   ========================================================================== */

:root {

  /* ── COR ─────────────────────────────────────────────────────────────────
     Nomes preservados do :root original de index.html. */

  /* Superfícies / fundo */
  --bg: #040404;          /* fundo principal (quase preto)         */
  --s1: #0d0d0d;          /* superfície 1 (cards)                  */
  --s2: #141414;          /* superfície 2 (hover / elevada)        */

  /* Bordas */
  --b:  rgba(255, 255, 255, .08);   /* borda padrão                */
  --b2: rgba(255, 255, 255, .12);   /* borda de destaque           */

  /* Marca / acento (verde) */
  --g:    #22C55E;                  /* verde primário da marca     */
  --glow: rgba(34, 197, 94, .3);    /* brilho verde (box-shadow)   */

  /* Texto */
  --t:  #F5F5F5;                    /* texto principal             */
  --tm: rgba(245, 245, 245, .55);   /* texto secundário (muted)    */
  --td: rgba(245, 245, 245, .28);   /* texto terciário (dim)       */

  /* Semântico — negativo / problema (vermelho) */
  --red:    rgba(239, 68, 68, .85);
  --red-bg: rgba(239, 68, 68, .07);
  --red-b:  rgba(239, 68, 68, .15);

  /* Acentos pontuais usados na LP (novos tokens — antes hardcoded) */
  --on-accent:     #000000;             /* texto sobre botão verde          */
  --amber:         #F59E0B;             /* estrelas de avaliação            */
  --indigo-glow:   rgba(99, 102, 241, .07); /* orb decorativa índigo (hero) */

  /* Escala de verde por opacidade (usada em fundos/bordas/badges verdes) */
  --g-06: rgba(34, 197, 94, .06);
  --g-07: rgba(34, 197, 94, .07);
  --g-08: rgba(34, 197, 94, .08);
  --g-09: rgba(34, 197, 94, .09);
  --g-10: rgba(34, 197, 94, .10);
  --g-14: rgba(34, 197, 94, .14);
  --g-20: rgba(34, 197, 94, .20);
  --g-28: rgba(34, 197, 94, .28);
  --g-45: rgba(34, 197, 94, .45);


  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────────
     Fontes: Outfit (display/títulos) + IBM Plex Sans (corpo). */

  --font-display: 'Outfit', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;

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

  /* Escala de tamanho — fluida (clamp) para títulos, fixa para o resto.
     Nomes espelham o papel real de cada valor no index.html. */
  --fs-hero:    clamp(30px, 8.5vw, 78px);  /* .hero h1                       */
  --fs-h2:      clamp(26px, 4.2vw, 52px);  /* .sh (título de seção)          */
  --fs-h2-cta:  clamp(26px, 4vw,  44px);   /* .fcta-box h2                   */
  --fs-sub:     clamp(15px, 2vw,  19px);   /* .hero-sub                      */
  --fs-sub-sm:  clamp(15px, 1.8vw,18px);   /* .ssub                          */
  --fs-display-lg: 56px;                   /* números grandes (.pc-num)      */
  --fs-display:    52px;                    /* .nc-v                          */
  --fs-price:      44px;                    /* .plan-price                    */
  --fs-2xl:     26px;                        /* .si-n                          */
  --fs-xl:      22px;                        /* .fn-title                      */
  --fs-lg:      19px;                        /* .pc h3                         */
  --fs-md:      18px;                        /* .sc h3 / .logo(nav)            */
  --fs-base:    16px;                        /* corpo (body)                   */
  --fs-15:      15px;                        /* .btn-main / .hs-n              */
  --fs-14:      14px;                        /* textos de card                 */
  --fs-13:      13px;                        /* labels de apoio                */
  --fs-12:      12px;                        /* badges / hints                 */
  --fs-11:      11px;                        /* eyebrow / tags                 */

  /* Altura de linha */
  --lh-solid:   1;      /* números display          */
  --lh-hero:    1.02;   /* .hero h1                  */
  --lh-snug:    1.07;   /* .sh                       */
  --lh-tight:   1.25;   /* títulos de card           */
  --lh-base:    1.6;    /* corpo                     */
  --lh-relaxed: 1.72;   /* subtítulos / parágrafos   */

  /* Espaçamento entre letras */
  --ls-tighter: -0.8px; /* .hero h1                  */
  --ls-tight:   -0.3px; /* .sh                       */
  --ls-eyebrow:  2.5px; /* .sl (rótulo de seção)     */
  --ls-label:    2px;   /* .ad-label / .sc-num       */
  --ls-wide:     .8px;  /* marquee                   */


  /* ── ESPAÇAMENTO ─────────────────────────────────────────────────────────
     Escala de espaçamento + ritmo vertical das seções. */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  14px;
  --space-5:  16px;
  --space-6:  18px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  28px;
  --space-10: 32px;
  --space-12: 40px;
  --space-14: 48px;
  --space-16: 56px;
  --space-18: 64px;
  --space-20: 72px;

  /* Ritmo vertical de seção (padding-top/bottom por breakpoint) */
  --section-y:    110px;  /* padrão (.sec)                        */
  --section-y-lg: 140px;  /* hero / CTA final                     */
  --section-y-md: 80px;   /* <= 960px                             */
  --section-y-sm: 64px;   /* <= 640px                             */

  --gutter:    24px;      /* respiro lateral padrão               */
  --container: 1080px;    /* largura máxima do conteúdo (.ctr)    */


  /* ── RAIO ────────────────────────────────────────────────────────────────*/
  --radius-xs:  4px;    /* .ptag                         */
  --radius-sm:  6px;    /* ícones pequenos               */
  --radius:     10px;   /* chips / resultados            */
  --radius-md:  12px;   /* botões / .hs-n                */
  --radius-lg:  14px;   /* .sc-ico                       */
  --radius-xl:  16px;   /* .stats-bar / .hs              */
  --radius-2xl: 20px;   /* cards principais              */
  --radius-3xl: 28px;   /* .fcta-box                     */
  --radius-pill:100px;  /* pills / botões arredondados   */


  /* ── SOMBRA / BRILHO ─────────────────────────────────────────────────────*/
  --shadow-card:      0 20px 60px rgba(0, 0, 0, .4);       /* hover de card       */
  --shadow-glow:      0 0 44px var(--glow);                /* CTA principal       */
  --shadow-glow-soft: 0 0 28px var(--glow);                /* CTAs secundários    */
  --blur-orb:         80px;                                 /* filtro das orbs     */
}