/* ============================================================
   VARIÁVEIS GLOBAIS — PG CUSTOM
   Paleta: Preto · Roxo · Rosa · Dourado · Branco
============================================================ */

:root {

  /* ──────────────────────────────────────────
     CORES — FUNDO
  ────────────────────────────────────────── */
  --bg-primary:     #0a0a0a;
  --bg-secondary:   #111111;
  --bg-card:        #1a1a1a;
  --bg-overlay:     rgba(0, 0, 0, 0.60);

  /* ──────────────────────────────────────────
     CORES — ROXO (acento principal)
  ────────────────────────────────────────── */
  --accent:         #7C3AED;
  --accent-light:   #A78BFA;
  --accent-dark:    #5B21B6;
  --accent-subtle:  rgba(124, 58, 237, 0.10);
  --accent-border:  rgba(124, 58, 237, 0.22);

  /* ──────────────────────────────────────────
     CORES — ROSA (acento secundário)
  ────────────────────────────────────────── */
  --rose:           #EC4899;
  --rose-light:     #F472B6;
  --rose-subtle:    rgba(236, 72, 153, 0.10);
  --rose-border:    rgba(236, 72, 153, 0.22);

  /* ──────────────────────────────────────────
     CORES — DOURADO AMARELO (CTAs · preços · premium)
  ────────────────────────────────────────── */
  --gold:           #D4AF37;
  --gold-light:     #E8CC6A;
  --gold-dark:      #B8901A;
  --gold-subtle:    rgba(212, 175, 55, 0.12);
  --gold-border:    rgba(212, 175, 55, 0.28);

  /* ──────────────────────────────────────────
     CORES — TEXTO
  ────────────────────────────────────────── */
  --text-primary:   #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted:     #888888;
  --text-on-gold:   #0a0a0a;

  /* ──────────────────────────────────────────
     CORES — SISTEMA
  ────────────────────────────────────────── */
  --white:          #FFFFFF;
  --black:          #000000;
  --border-subtle:  rgba(255, 255, 255, 0.08);

  /* ──────────────────────────────────────────
     TIPOGRAFIA — FAMÍLIAS
  ────────────────────────────────────────── */
  --font-heading:   'Manrope', sans-serif;
  --font-body:      'Inter', sans-serif;

  /* ──────────────────────────────────────────
     TIPOGRAFIA — TAMANHOS
  ────────────────────────────────────────── */
  --fs-xs:    0.75rem;    /*  12px */
  --fs-sm:    0.875rem;   /*  14px */
  --fs-base:  1rem;       /*  16px */
  --fs-md:    1.125rem;   /*  18px */
  --fs-lg:    1.25rem;    /*  20px */
  --fs-xl:    1.5rem;     /*  24px */
  --fs-2xl:   2rem;       /*  32px */
  --fs-3xl:   2.5rem;     /*  40px */
  --fs-4xl:   3rem;       /*  48px */
  --fs-5xl:   3.75rem;    /*  60px */

  /* ──────────────────────────────────────────
     TIPOGRAFIA — PESOS
  ────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ──────────────────────────────────────────
     TIPOGRAFIA — ENTRELINHAS
  ────────────────────────────────────────── */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ──────────────────────────────────────────
     ESPAÇAMENTO (escala de 8px)
  ────────────────────────────────────────── */
  --space-1:   0.25rem;   /*   4px */
  --space-2:   0.5rem;    /*   8px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-6:   1.5rem;    /*  24px */
  --space-8:   2rem;      /*  32px */
  --space-10:  2.5rem;    /*  40px */
  --space-12:  3rem;      /*  48px */
  --space-16:  4rem;      /*  64px */
  --space-20:  5rem;      /*  80px */
  --space-24:  6rem;      /*  96px */
  --space-32:  8rem;      /* 128px */

  /* ──────────────────────────────────────────
     CONTAINER
  ────────────────────────────────────────── */
  --container-max:     1280px;
  --container-pad-sm:  1.5rem;
  --container-pad-md:  2.5rem;
  --container-pad-lg:  5rem;

  /* ──────────────────────────────────────────
     BORDAS
  ────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────
     SOMBRAS
  ────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px  rgba(0, 0, 0, 0.40);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.60);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.50);
  --shadow-btn:  0 2px 8px  rgba(0, 0, 0, 0.40);

  /* ──────────────────────────────────────────
     TRANSIÇÕES
  ────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ──────────────────────────────────────────
     NAVBAR
  ────────────────────────────────────────── */
  --navbar-height: 56px;
  --navbar-bg:     rgba(8, 8, 8, 0.72);

  /* ──────────────────────────────────────────
     Z-INDEX
  ────────────────────────────────────────── */
  --z-base:     1;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;

  /* ──────────────────────────────────────────
     BREAKPOINTS — referência para @media
     mobile:  < 768px
     tablet:  768px  – 1023px
     desktop: 1024px – 1279px
     wide:    ≥ 1280px
  ────────────────────────────────────────── */
}