/* ============================================================
   BG5 COMPANY — DESIGN TOKENS
   Fonte da identidade: perfil @bg5.company (logo, artes, paleta)
   Nenhum valor solto deve existir fora deste arquivo.
   ============================================================ */

:root {
  /* ---------- COR: fundo (azul profundo → quase preto) ---------- */
  --c-void:        #05080f;  /* base absoluta da página          */
  --c-deep:        #0a1220;  /* azul-marinho das artes do IG     */
  --c-navy:        #0e1b2e;  /* superfície de card               */
  --c-navy-hi:     #142642;  /* card em hover / elevação         */
  --c-navy-soft:   #1b3050;  /* preenchimentos discretos         */

  /* ---------- COR: dourado / champagne (destaques do IG) ---------- */
  --c-gold:        #c9a961;
  --c-gold-lo:     #9c7f42;
  --c-gold-hi:     #e6d0a0;

  /* ---------- COR: azul metálico (gradiente da logo) ---------- */
  --c-steel-hi:    #bfdcf7;
  --c-steel:       #6fa8dc;
  --c-steel-lo:    #2f6ba8;

  /* ---------- COR: texto ----------
     Os três níveis passam em AA tanto sobre --c-void quanto sobre --c-navy
     (o fundo de card, que é o mais claro dos dois e portanto o caso crítico):
     mist 7,8:1 · mute 5,7:1 · faint 4,8:1.
     Para grafismo puro use --c-ghost — nunca para texto. */
  --c-ice:         #f2f6fb;  /* títulos e texto forte            */
  --c-mist:        #9fb0c6;  /* corpo de texto                   */
  --c-mute:        #8496ae;  /* legendas, metadados              */
  --c-faint:       #74879e;  /* notas, avisos, placeholders      */
  --c-ghost:       #465a76;  /* apenas grafismo, nunca texto     */

  /* ---------- COR: linhas e véus ---------- */
  --c-line:        rgba(255, 255, 255, 0.09);
  --c-line-hi:     rgba(255, 255, 255, 0.16);
  --c-line-gold:   rgba(201, 169, 97, 0.28);
  --c-veil:        rgba(5, 8, 15, 0.72);
  --c-glass:       rgba(14, 27, 46, 0.62);

  /* ---------- COR: estado ---------- */
  --c-alert:       #d98a6a;  /* sintoma / "antes" — âmbar dessaturado */
  --c-ok:          #7fb59a;  /* estrutura correta / "depois"          */

  /* ---------- GRADIENTES ---------- */
  --g-metal: linear-gradient(
    118deg,
    var(--c-steel-lo) 0%, var(--c-steel) 22%, var(--c-steel-hi) 38%,
    var(--c-steel) 55%, var(--c-steel-lo) 74%, var(--c-steel) 100%
  );
  --g-gold: linear-gradient(100deg, var(--c-gold-lo), var(--c-gold-hi) 46%, var(--c-gold));
  --g-hairline: linear-gradient(90deg, transparent, var(--c-line-gold) 22%, var(--c-line-gold) 78%, transparent);
  --g-fade-down: linear-gradient(180deg, transparent, var(--c-void));

  /* ---------- TIPOGRAFIA ---------- */
  --f-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.35rem + 5.4vw, 6.25rem);
  --fs-h1:      clamp(2.15rem, 1.4rem + 3.4vw, 4.25rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.3vw, 3.1rem);
  --fs-h3:      clamp(1.2rem, 1.06rem + 0.7vw, 1.65rem);
  --fs-h4:      clamp(1.02rem, 0.98rem + 0.28vw, 1.18rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.42vw, 1.32rem);
  --fs-body:    clamp(0.98rem, 0.95rem + 0.16vw, 1.075rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.795rem;
  --fs-eyebrow: 0.72rem;
  --fs-numeral: clamp(2.4rem, 1.6rem + 3vw, 4rem);

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-body:  1.68;

  --ls-display: -0.022em;
  --ls-eyebrow: 0.26em;
  --ls-caps:    0.14em;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --sp-section: clamp(4.5rem, 2.5rem + 7.5vw, 9.5rem);
  --gutter:     clamp(1.25rem, 0.7rem + 2.2vw, 2.75rem);

  /* ---------- CONTAINERS ---------- */
  --w-wide:   1320px;
  --w-base:   1180px;
  --w-narrow: 860px;
  --w-text:   660px;

  /* ---------- RAIO (editorial: quase reto) ---------- */
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 7px;  --r-lg: 12px;  --r-full: 999px;

  /* ---------- SOMBRA ---------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 14px 34px -22px rgba(0, 0, 0, 0.9);
  --sh-3: 0 34px 70px -40px rgba(0, 0, 0, 0.95);
  --sh-gold: 0 0 0 1px rgba(201, 169, 97, 0.34), 0 26px 60px -34px rgba(201, 169, 97, 0.32);
  --sh-focus: 0 0 0 2px var(--c-void), 0 0 0 4px var(--c-gold);

  /* ---------- MOVIMENTO ---------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 340ms;
  --dur-3: 720ms;
  --dur-4: 1100ms;

  /* ---------- ESTRUTURA ---------- */
  --h-header: 76px;
  --h-header-compact: 62px;
  --z-base: 1; --z-raised: 10; --z-header: 100; --z-menu: 200; --z-top: 300;
}

@media (max-width: 720px) {
  :root { --h-header: 64px; --h-header-compact: 56px; }
}