/* Brito Cosméticos / TRUSS — design tokens reais
   Fonte: ../referências/Landing Page.html (CSS :root) */

:root {
  /* === Cores === */
  --bg:        #060C14;
  --bg-2:      #080E17;
  --bg-3:      #0D1520;
  --bg-light:  #F5F3F0;

  --fg:        #FFFFFF;
  --fg-muted:  rgba(255,255,255,0.5);
  --fg-soft:   rgba(255,255,255,0.32);
  --fg-dim:    rgba(255,255,255,0.15);
  --line:      rgba(255,255,255,0.08);

  --accent:    #E8DCC4;          /* dourado bege luxo Truss */
  --accent-2:  #25D366;          /* WhatsApp green */

  /* === Tipografia === */
  --display: "Oswald", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --body:    "Inter", "Helvetica Neue", sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-eyebrow:    10px;
  --fs-nav:        11px;
  --fs-body:       15px;
  --fs-body-lg:    16px;
  --fs-h3:         clamp(18px, 2vw, 24px);
  --fs-h2:         clamp(30px, 4.8vw, 64px);
  --fs-h1:         clamp(46px, 8.5vw, 132px);
  --fs-loader:     clamp(42px, 10vw, 110px);

  --lh-display:  0.9;
  --lh-tight:    1.1;
  --lh-normal:   1.5;
  --lh-relaxed:  1.8;

  --ls-display:  -2px;
  --ls-nav:      2.4px;
  --ls-eyebrow:  4px;
  --ls-label:    3.5px;

  /* === Espaçamento === */
  --pad-page:         36px;
  --pad-page-mobile:  20px;
  --pad-section:      96px;
  --pad-section-mobile: 64px;
  --pad-nav:          18px;
  --pad-nav-scrolled: 12px;

  /* === Movimento === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Efeitos === */
  --grain-opacity: 0.06;
  --nav-blur:      blur(14px) saturate(120%);
  --nav-bg-scrolled: rgba(6,12,20,0.88);
}