/* =============================================================================
   tokens.css — reetfps.com v2 (Agente A — Fundação)
   Mesma família visual do app (ReetFPS-Premium-HTML/dist/styles.css + inicio2.css).
   Prefixo --rs-*. NÃO renomear: secoes-a/b/c.css dependem destes nomes.

   Fontes: Barlow Condensed (display, caixa alta, itálico 800 no destaque) + Inter (texto).
   Carregadas por <link> do Google Fonts no <head> do index_v2.php.

   Regras herdadas do app:
   - roxo é a cor principal; dourado = marca premium (kicker, selo de plano);
     verde = ligado/ok/ao vivo. Brilho só no que é ação principal ou ativo.
   - raio entre 5 e 7 px em todo componente (fora círculo, pílula e barrinhas de 2–3 px).
   - cartão sem borda de repouso: profundidade = 3 camadas de sombra; borda só para estado.
   ============================================================================= */
:root {
  /* ---------- fundo e superfícies ---------- */
  --rs-bg:            #060a1a;                 /* fundo da página (= --bg do app) */
  --rs-bg-2:          #0d122d;                 /* faixa alternada de seção */
  --rs-bg-deep:       #04060f;                 /* rodapé, fundo de overlay */
  --rs-surface:       rgba(13, 18, 45, .9);    /* cartão */
  --rs-surface-2:     rgba(24, 21, 76, .92);   /* cartão elevado / hover */
  --rs-surface-3:     rgba(34, 26, 91, .92);   /* cartão ativo */
  --rs-surface-solid: #0d122d;                 /* cartão opaco (sobre imagem) */
  --rs-glass:         rgba(8, 10, 28, .74);    /* header rolado, vidro */
  --rs-line:          rgba(108, 105, 144, .3); /* divisória neutra */
  --rs-line-soft:     rgba(255, 255, 255, .06);
  --rs-line-strong:   rgba(94, 36, 240, .58);  /* borda de estado (ativo/selecionado) */
  --rs-line-accent:   rgba(167, 139, 250, .24);/* contorno de botão secundário */

  /* ---------- roxo da marca ---------- */
  --rs-purple:        #5e24f0;
  --rs-purple-bright: #7135ff;
  --rs-purple-light:  #905fe5;
  --rs-purple-soft:   #c8beec;
  --rs-purple-pale:   #c9bbff;   /* fim do degradê do título */
  --rs-purple-deep:   #33119e;
  --rs-violet:        #8b5cf6;   /* topo do botão principal */
  --rs-violet-dark:   #6d28d9;   /* base do botão principal */
  --rs-violet-line:   rgba(167, 139, 250, .52);

  /* ---------- texto ---------- */
  --rs-text:          #f4f2fb;
  --rs-text-2:        #c9c5dc;   /* texto secundário forte (AA sobre --rs-bg) */
  --rs-muted:         #9c98b4;   /* subtítulo, descrição (AA: 7.0:1 sobre --rs-bg) */
  --rs-muted-2:       #827e96;   /* legenda pequena; só >= 14px */
  --rs-on-accent:     #ffffff;

  /* ---------- semânticas ---------- */
  --rs-gold:          #f7bd32;   /* premium, kicker, preço riscado em destaque */
  --rs-gold-soft:     rgba(247, 189, 50, .14);
  --rs-green:         #18d77c;   /* ok / ligado */
  --rs-green-ui:      #3fdc97;   /* verde de interface (contador, "ao vivo") */
  --rs-green-text:    #4be3a0;   /* texto verde em selo */
  --rs-danger:        #fb7185;
  --rs-discord:       #5865f2;
  --rs-whatsapp:      #25d366;

  /* ---------- cores por grupo (= inicio2.css --in2-c-*) ----------
     Use em um cartão com style="--c: var(--rs-c-pc)" ou classe; .rs-icon e
     .rs-card--group derivam tudo de --c com color-mix. */
  --rs-c-pb:   #7135ff;  /* Point Blank / marca */
  --rs-c-pc:   #4a7dff;  /* desempenho do PC */
  --rs-c-limp: #2fcb8c;  /* limpeza */
  --rs-c-rede: #e9a53c;  /* rede */
  --rs-c-com:  #d9509f;  /* comunidade */
  --rs-c-ferr: #8a6bff;  /* ferramentas e suporte */

  /* ---------- degradês ---------- */
  --rs-grad-btn:   linear-gradient(180deg, var(--rs-violet), var(--rs-violet-dark));
  --rs-grad-title: linear-gradient(90deg, var(--rs-purple-bright), var(--rs-purple-pale));
  --rs-grad-gold:  linear-gradient(90deg, #f7bd32, #ffe08a);
  /* linha do topbar do app: apagada à esquerda, acende à direita */
  --rs-grad-rule:  linear-gradient(90deg, transparent 0%, transparent 40%, rgba(139,92,246,.18) 62%, rgba(167,139,250,.55) 100%);
  --rs-grad-page:
    radial-gradient(1100px 560px at 80% -10%, rgba(70, 28, 196, .2), transparent 62%),
    radial-gradient(800px 520px at 12% 108%, rgba(40, 30, 112, .14), transparent 60%),
    linear-gradient(160deg, #070b1d 0%, #060a1a 48%, #090d24 100%);

  /* ---------- tipografia ---------- */
  --rs-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --rs-font-ui:      Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* escala fluida 360 px → 1440 px */
  --rs-fs-hero:  clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem);  /* h1 do hero */
  --rs-fs-h2:    clamp(2.1rem, 1.55rem + 2.4vw, 3.5rem);   /* título de seção */
  --rs-fs-h3:    clamp(1.35rem, 1.2rem + .6vw, 1.75rem);   /* título de cartão */
  --rs-fs-h4:    clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
  --rs-fs-num:   clamp(2.4rem, 1.8rem + 2.6vw, 4.25rem);   /* número grande (preço, FPS) */
  --rs-fs-lead:  clamp(1rem, .95rem + .3vw, 1.2rem);       /* subtítulo */
  --rs-fs-body:  1rem;
  --rs-fs-sm:    .875rem;
  --rs-fs-xs:    .8125rem;
  --rs-fs-label: .8125rem;   /* eyebrow, selo grande (Barlow, caixa alta) */
  --rs-fs-micro: .6875rem;   /* selo pequeno */

  --rs-lh-tight: .95;
  --rs-lh-title: 1.05;
  --rs-lh-body:  1.65;
  --rs-ls-label: .16em;      /* espaçamento de eyebrow/kicker */
  --rs-ls-title: .01em;

  /* ---------- espaçamento (base 4 px) ---------- */
  --rs-sp-1: .25rem;
  --rs-sp-2: .5rem;
  --rs-sp-3: .75rem;
  --rs-sp-4: 1rem;
  --rs-sp-5: 1.25rem;
  --rs-sp-6: 1.5rem;
  --rs-sp-8: 2rem;
  --rs-sp-10: 2.5rem;
  --rs-sp-12: 3rem;
  --rs-sp-16: 4rem;
  --rs-sp-20: 5rem;
  /* ritmo (ref. ExitLag 72/48): 48 px em 390 -> 80 px em 1440; 96/160 entre seções */
  --rs-sp-section: clamp(3rem, 2.25rem + 3.05vw, 5rem);  /* padding vertical de seção */
  --rs-sp-head:    clamp(2rem, 1.625rem + 1.52vw, 3rem); /* cabeçalho de seção -> conteúdo (32 -> 48) */
  --rs-gutter:     clamp(1rem, .6rem + 1.8vw, 2rem);     /* respiro lateral do container */
  --rs-gap:        clamp(1rem, .8rem + .8vw, 1.5rem);    /* gap padrão de grade */
  --rs-pad-card:    clamp(1.25rem, 1.16rem + .38vw, 1.5rem); /* padding de cartão padrão (20 -> 24) */
  --rs-pad-card-lg: clamp(1.5rem, 1.31rem + .76vw, 2rem);    /* cartão grande: plano, canal, quadro (24 -> 32) */
  --rs-container:  1240px;
  --rs-container-narrow: 860px;
  --rs-header-h:   72px;

  /* ---------- raios (app: 5–7 px) ---------- */
  --rs-r-xs:   4px;    /* selo */
  --rs-r-sm:   5px;    /* botão, campo */
  --rs-r-md:   6px;    /* cartão */
  --rs-r-lg:   7px;    /* painel, quadrado de ícone */
  --rs-r-pill: 999px;
  --rs-r-round: 50%;

  /* ---------- sombras (= --sh-* do app) ---------- */
  --rs-sh-card:  0 1px 2px rgba(0,0,0,.45), 0 6px 14px -8px rgba(0,0,0,.55), 0 18px 38px -24px rgba(0,0,0,.75);
  --rs-sh-panel: 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.6), 0 30px 60px -34px rgba(0,0,0,.85);
  --rs-sh-hover: 0 1px 3px rgba(0,0,0,.55), 0 14px 30px -16px rgba(0,0,0,.7), 0 36px 70px -34px rgba(113,53,255,.6);
  --rs-sh-glow:  0 0 24px rgba(124, 58, 237, .28);
  --rs-sh-btn:   inset 0 1px 0 rgba(255,255,255,.19), 0 0 17px rgba(124,58,237,.34);
  --rs-sh-btn-hover: inset 0 1px 0 rgba(255,255,255,.24), 0 0 28px rgba(124,58,237,.55), 0 10px 24px -12px rgba(113,53,255,.8);
  --rs-sh-modal: 0 40px 120px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(167,139,250,.18);

  /* ---------- movimento ---------- */
  --rs-ease:      cubic-bezier(.2, .8, .2, 1);   /* = --ease-card */
  --rs-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --rs-dur-fast:  .15s;
  --rs-dur:       .22s;
  --rs-dur-slow:  .45s;
  --rs-dur-reveal:.7s;

  /* ---------- camadas ---------- */
  --rs-z-base:    1;
  --rs-z-raised:  10;
  --rs-z-sticky:  50;
  --rs-z-drawer:  999;    /* abaixo do header */
  --rs-z-header:  1000;
  --rs-z-modal:   2000;
  --rs-z-popup:   2100;
  --rs-z-toast:   2200;
}