/* ============================================================
   Be Invest | XP — Design Tokens
   Extraído da identidade visual de beinvest.com.br
   ============================================================ */

:root {
  /* ---------- Cor: superfícies ---------- */
  --bi-bg-base: #000000;
  --bi-bg-base-soft: #070707;
  --bi-bg-surface: #0e0e0e;
  --bi-bg-surface-2: #131313;
  --bi-bg-secondary: #202020;
  --bi-bg-overlay: rgba(24, 24, 24, 0.82);      /* #181818D1 */
  --bi-overlay-navy: rgba(40, 55, 120, 0.34);   /* #28377857 */
  --bi-overlay-violet: rgba(87, 4, 168, 0.56);  /* #5704A88F */

  /* ---------- Cor: acento (violeta) ---------- */
  --bi-accent: #720efb;         /* ação primária */
  --bi-accent-deep: #5704a8;    /* gradientes / profundo */
  --bi-accent-bright: #872fff;  /* destaque em texto GRANDE (títulos, números) */
  --bi-accent-text: #9d5cff;    /* violeta para texto PEQUENO: 5.4:1 sobre preto (o bright dá 3.9:1 e reprova AA abaixo de 18px) */
  --bi-accent-glow: #6c18e2;    /* brilho / text-shadow */

  /* ---------- Cor: detalhes Private ---------- */
  --bi-private-gold: #cfb57d;
  --bi-private-gold-hover: #dcc795;
  --bi-private-border-soft: rgba(207, 181, 125, 0.16);
  --bi-private-border: rgba(207, 181, 125, 0.30);
  --bi-private-tint: rgba(207, 181, 125, 0.08);

  /* ---------- Cor: texto e neutros ---------- */
  --bi-text-primary: #ffffff;
  --bi-text-body: rgba(255, 255, 255, 0.988);   /* #FFFFFFFC */
  --bi-text-muted: #8f8f8f;     /* clareado do #6e6e6e original: 4.1:1 reprovava AA em texto de 15-16px; este dá 6.5:1 */
  --bi-text-subtle: #7a7a7a;    /* clareado do #545454: o disclaimer de 13px ficava a 2.8:1; este dá 4.9:1 */
  --bi-text-dim: #333333;
  --bi-text-dim-2: #444444;
  --bi-border-muted: rgba(126, 126, 126, 0.93); /* #7E7E7EED */

  /* ---------- Gradientes ---------- */
  --bi-grad-hero: linear-gradient(180deg, #000000 0%, #5704a8 100%);
  --bi-grad-fade: linear-gradient(180deg, #5704a8 0%, #000000 100%);
  --bi-grad-foto: linear-gradient(180deg,
    var(--bi-bg-base) 0%,
    rgba(0,0,0,.97) 12%,
    rgba(0,0,0,.86) 36%,
    rgba(0,0,0,.76) 56%,
    rgba(0,0,0,.70) 68%,
    rgba(0,0,0,.82) 80%,
    rgba(0,0,0,.96) 93%,
    var(--bi-bg-base) 100%);

  /* ---------- Tipografia ---------- */
  --bi-font-display: "Poppins", sans-serif;
  --bi-font-body: "DM Sans", sans-serif;
  --bi-font-serif: "Roboto Slab", serif;

  --bi-fs-hero: 104px;      --bi-fw-hero: 900;
  --bi-fs-display-xl: 75px; --bi-fw-display-xl: 700;
  --bi-fs-display-lg: 65px; --bi-fw-display-lg: 700;
  --bi-fs-display-light: 62px; --bi-fw-display-light: 300;
  --bi-fs-heading-xl: 49px; --bi-fw-heading-xl: 700;
  --bi-fs-heading-lg: 45px; /* peso 400 + trecho 700 */
  --bi-fs-heading-md: 30px;
  --bi-fs-heading-sm: 26px;
  --bi-fs-btn-lg: 25px;     --bi-fw-btn: 500;
  --bi-fs-body-lg: 21px;
  --bi-fs-body-md: 18px;
  --bi-fs-body-sm: 15px;
  --bi-fs-caption: 13px;

  --bi-lh-tight: 1.1;
  --bi-lh-heading: 1.3;
  --bi-lh-body: 1.7;
  --bi-ls-tight: 0.2px;
  --bi-ls-wide: 0.5px;

  /* ---------- Forma ---------- */
  --bi-radius-sm: 6px;    /* botões, inputs */
  --bi-radius-md: 8px;    /* cards */
  --bi-radius-lg: 10px;   /* mídia */
  --bi-radius-xl: 20px;   /* cards grandes */
  --bi-radius-pill: 93px; /* CTA pill */

  /* ---------- Elevação ---------- */
  --bi-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  --bi-text-shadow-btn: 0 0 10px rgba(0, 0, 0, 0.3);
  --bi-text-shadow-glow: 0 0 77px var(--bi-accent-glow);

  /* ---------- Layout ---------- */
  --bi-container: 1140px;
  --bi-container-narrow: 770px;
  --bi-gap: 20px;
  --bi-section-y: 100px;
  --bi-section-y-lg: 150px;

  /* ---------- Movimento ---------- */
  --bi-duration: 1.2s;
  --bi-delay-reveal: 2s;
  --bi-ease: ease;
}