/* ==========================================================================
   POISONPAY® — DESIGN TOKENS
   Tema: "Venom Dark" · v1.0
   Fonte da verdade para cor, tipografia, espaço, motion e elevação.
   Nenhum valor bruto deve ser escrito fora deste arquivo.
   ========================================================================== */

:root {

  /* ======================================================================
     1. CORES DE MARCA
     Extraídas diretamente do logotipo oficial PoisonPay.
     ====================================================================== */

  --pp-magenta: #E700FF;   /* Poison Magenta — acento máximo, topo do gradiente */
  --pp-violet:  #A81CFF;   /* Violeta Neon   — realces e hover                  */
  --pp-purple:  #7B2CFA;   /* Roxo Poison    — COR PRIMÁRIA DA MARCA            */
  --pp-indigo:  #5A1FF5;   /* Índigo         — apoio da primária                */
  --pp-blue:    #3D1AF5;   /* Azul Elétrico  — base fria do gradiente           */
  --pp-deep:    #2A0B6B;   /* Roxo Escuro    — profundidade, fundos de destaque */
  --pp-sea:     #0B2545;   /* Azul Mar       — superfície fria, seções calmas   */

  /* ===== Escala ROXO (primária) ===== */
  --pp-purple-50:  #F4EDFF;
  --pp-purple-100: #E5D5FF;
  --pp-purple-200: #CBABFF;
  --pp-purple-300: #B081FF;
  --pp-purple-400: #9556FF;
  --pp-purple-500: #7B2CFA;  /* marca */
  --pp-purple-600: #6318E0;
  --pp-purple-700: #4D11B4;
  --pp-purple-800: #380C87;
  --pp-purple-900: #26085C;

  /* ===== Escala MAGENTA (acento) ===== */
  --pp-magenta-50:  #FDE8FF;
  --pp-magenta-100: #FAC8FF;
  --pp-magenta-200: #F591FF;
  --pp-magenta-300: #F059FF;
  --pp-magenta-400: #EB2CFF;
  --pp-magenta-500: #E700FF;  /* acento */
  --pp-magenta-600: #BC00D1;
  --pp-magenta-700: #9000A1;
  --pp-magenta-800: #650071;
  --pp-magenta-900: #3D0044;

  /* ===== Escala AZUL ELÉTRICO (secundária) ===== */
  --pp-blue-50:  #EBE9FF;
  --pp-blue-100: #D0CAFF;
  --pp-blue-200: #A99DFF;
  --pp-blue-300: #8170FF;
  --pp-blue-400: #5E43FF;
  --pp-blue-500: #3D1AF5;  /* secundária */
  --pp-blue-600: #3010D1;
  --pp-blue-700: #240BA3;
  --pp-blue-800: #190776;
  --pp-blue-900: #100450;

  /* ===== Escala AZUL MAR (superfícies frias) ===== */
  --pp-sea-50:  #E7F0FA;
  --pp-sea-100: #C4DAF0;
  --pp-sea-200: #8FB4DD;
  --pp-sea-300: #5A8CC7;
  --pp-sea-400: #2F65A6;
  --pp-sea-500: #1B4079;
  --pp-sea-600: #143260;
  --pp-sea-700: #0E2549;
  --pp-sea-800: #0B2545;  /* Azul Mar de marca */
  --pp-sea-900: #061224;

  /* ======================================================================
     2. SUPERFÍCIES (DARK THEME)
     Preto arroxeado — nunca cinza neutro. A marca vive no escuro.
     ====================================================================== */

  --pp-bg-base:   #07050F;  /* fundo absoluto da página        */
  --pp-bg-elev-1: #0C0918;  /* superfície base / sidebar       */
  --pp-bg-elev-2: #131024;  /* cards, inputs                   */
  --pp-bg-elev-3: #1B1633;  /* hover, cabeçalhos de tabela     */
  --pp-bg-elev-4: #241E44;  /* popovers, estados pressionados  */
  --pp-bg-sea:    #0A1B33;  /* variante fria (azul mar)        */

  --pp-overlay-40: rgba(4, 2, 10, 0.40);
  --pp-overlay-60: rgba(4, 2, 10, 0.60);
  --pp-overlay-80: rgba(4, 2, 10, 0.80);

  /* ======================================================================
     3. TEXTO
     ====================================================================== */

  --pp-text-high:        #FFFFFF;
  --pp-text-med:         #C6BFDE;
  --pp-text-low:         #9089AD;
  --pp-text-muted:       #6C6489;
  --pp-text-placeholder: #565073;
  --pp-text-on-brand:    #FFFFFF;
  --pp-text-on-light:    #14102A;
  --pp-text-link:        var(--pp-purple-300);

  /* ======================================================================
     4. BORDAS
     ====================================================================== */

  --pp-border-subtle:  rgba(255, 255, 255, 0.06);
  --pp-border-default: rgba(255, 255, 255, 0.10);
  --pp-border-strong:  rgba(255, 255, 255, 0.18);
  --pp-border-brand:   rgba(123, 44, 250, 0.45);
  --pp-border-accent:  rgba(231, 0, 255, 0.40);

  /* ======================================================================
     5. STATUS FINANCEIROS
     Vocabulário fechado do gateway. Todo estado de transação usa um destes.
     ====================================================================== */

  --pp-paid:       #00E5A0;
  --pp-pending:    #FFB020;
  --pp-refunded:   #35C6FF;
  --pp-failed:     #FF3D6E;
  --pp-review:     #A81CFF;
  --pp-chargeback: #FF7A3D;
  --pp-blocked:    #7E7898;

  --pp-status-paid-bg:           rgba(0, 229, 160, 0.14);
  --pp-status-paid-fg:           #3DF0BA;
  --pp-status-paid-border:       rgba(0, 229, 160, 0.40);

  --pp-status-pending-bg:        rgba(255, 176, 32, 0.14);
  --pp-status-pending-fg:        #FFC65C;
  --pp-status-pending-border:    rgba(255, 176, 32, 0.40);

  --pp-status-refunded-bg:       rgba(53, 198, 255, 0.14);
  --pp-status-refunded-fg:       #6FD8FF;
  --pp-status-refunded-border:   rgba(53, 198, 255, 0.40);

  --pp-status-failed-bg:         rgba(255, 61, 110, 0.14);
  --pp-status-failed-fg:         #FF7396;
  --pp-status-failed-border:     rgba(255, 61, 110, 0.40);

  --pp-status-review-bg:         rgba(168, 28, 255, 0.16);
  --pp-status-review-fg:         #C77BFF;
  --pp-status-review-border:     rgba(168, 28, 255, 0.45);

  --pp-status-chargeback-bg:     rgba(255, 122, 61, 0.14);
  --pp-status-chargeback-fg:     #FFA173;
  --pp-status-chargeback-border: rgba(255, 122, 61, 0.40);

  --pp-status-blocked-bg:        rgba(126, 120, 152, 0.18);
  --pp-status-blocked-fg:        #A9A3C0;
  --pp-status-blocked-border:    rgba(126, 120, 152, 0.42);

  /* ======================================================================
     6. SEMÂNTICAS DE INTERFACE
     ====================================================================== */

  --pp-success: #00E5A0;
  --pp-warning: #FFB020;
  --pp-danger:  #FF3D6E;
  --pp-info:    #35C6FF;

  /* ======================================================================
     7. TIPOGRAFIA
     ====================================================================== */

  --pp-font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pp-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular,
                  'Courier New', monospace;

  --pp-fw-regular:  400;
  --pp-fw-medium:   500;
  --pp-fw-semibold: 600;
  --pp-fw-bold:     700;
  --pp-fw-extra:    800;

  --pp-fs-display: 60px;  --pp-lh-display: 68px;
  --pp-fs-h1:      40px;  --pp-lh-h1:      48px;
  --pp-fs-h2:      30px;  --pp-lh-h2:      38px;
  --pp-fs-h3:      24px;  --pp-lh-h3:      32px;
  --pp-fs-h4:      20px;  --pp-lh-h4:      28px;
  --pp-fs-h5:      18px;  --pp-lh-h5:      24px;
  --pp-fs-body-lg: 17px;  --pp-lh-body-lg: 26px;
  --pp-fs-body:    16px;  --pp-lh-body:    24px;
  --pp-fs-body-sm: 14px;  --pp-lh-body-sm: 20px;
  --pp-fs-caption: 12px;  --pp-lh-caption: 16px;
  --pp-fs-label:  11.5px; --pp-lh-label:   14px;
  --pp-fs-mono:    14px;  --pp-lh-mono:    20px;

  --pp-tracking-tight: -0.02em;
  --pp-tracking-snug:  -0.01em;
  --pp-tracking-wide:   0.08em;
  --pp-tracking-caps:   0.12em;

  /* ======================================================================
     8. ESPAÇAMENTO — sistema de 4px
     ====================================================================== */

  --pp-space-0:  0;
  --pp-space-1:  4px;
  --pp-space-2:  8px;
  --pp-space-3:  12px;
  --pp-space-4:  16px;
  --pp-space-5:  20px;
  --pp-space-6:  24px;
  --pp-space-8:  32px;
  --pp-space-10: 40px;
  --pp-space-12: 48px;
  --pp-space-16: 64px;
  --pp-space-20: 80px;
  --pp-space-24: 96px;

  /* ======================================================================
     9. RAIO
     ====================================================================== */

  --pp-radius-xs:    4px;
  --pp-radius-sm:    6px;
  --pp-radius-md:    10px;
  --pp-radius-lg:    14px;
  --pp-radius-xl:    20px;
  --pp-radius-2xl:   28px;
  --pp-radius-pill:  9999px;
  --pp-radius-btn:   10px;
  --pp-radius-card:  16px;
  --pp-radius-modal: 22px;

  /* ======================================================================
     10. ELEVAÇÃO E GLOW
     No dark theme a hierarquia vem da luz, não da sombra: superfícies mais
     altas ficam mais claras e ganham glow de marca.
     ====================================================================== */

  --pp-elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --pp-elev-2: 0 4px 14px rgba(0, 0, 0, 0.50);
  --pp-elev-3: 0 10px 30px rgba(0, 0, 0, 0.55);
  --pp-elev-4: 0 20px 56px rgba(0, 0, 0, 0.62);

  --pp-glow-purple:  0 0 24px rgba(123, 44, 250, 0.42);
  --pp-glow-magenta: 0 0 24px rgba(231, 0, 255, 0.38);
  --pp-glow-blue:    0 0 24px rgba(61, 26, 245, 0.38);
  --pp-glow-ring:    0 0 0 1px rgba(123, 44, 250, 0.28), 0 0 28px rgba(123, 44, 250, 0.22);
  --pp-focus-ring:   0 0 0 3px rgba(168, 28, 255, 0.38);

  /* ======================================================================
     11. GRADIENTES
     `--pp-grad-brand` reproduz o gradiente do logotipo e é o único
     autorizado em superfícies primárias.
     ====================================================================== */

  --pp-grad-brand:      linear-gradient(135deg, #E700FF 0%, #7B2CFA 52%, #3D1AF5 100%);
  --pp-grad-brand-rev:  linear-gradient(135deg, #3D1AF5 0%, #7B2CFA 48%, #E700FF 100%);
  --pp-grad-venom:      linear-gradient(135deg, #7B2CFA 0%, #E700FF 100%);
  --pp-grad-abyss:      linear-gradient(160deg, #1B1633 0%, #0B2545 100%);
  --pp-grad-sea:        linear-gradient(135deg, #3D1AF5 0%, #0B2545 100%);
  --pp-grad-soft:       linear-gradient(135deg, rgba(231, 0, 255, 0.18) 0%, rgba(61, 26, 245, 0.10) 100%);
  --pp-grad-glass:      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --pp-grad-surface:    linear-gradient(180deg, #0C0918 0%, #07050F 100%);
  --pp-grad-text:       linear-gradient(135deg, #FFFFFF 0%, #CBABFF 55%, #E700FF 100%);

  /* ======================================================================
     12. GLASSMORPHISM
     ====================================================================== */

  --pp-glass-bg:     rgba(19, 16, 36, 0.68);
  --pp-glass-border: rgba(168, 28, 255, 0.18);
  --pp-glass-blur:   blur(28px) saturate(170%);

  /* ======================================================================
     13. MOTION
     ====================================================================== */

  --pp-dur-instant: 80ms;
  --pp-dur-fast:    140ms;
  --pp-dur-base:    220ms;
  --pp-dur-slow:    340ms;
  --pp-dur-slower:  520ms;

  --pp-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --pp-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --pp-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --pp-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --pp-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ======================================================================
     14. Z-INDEX
     ====================================================================== */

  --pp-z-base:     0;
  --pp-z-raised:   100;
  --pp-z-dropdown: 1000;
  --pp-z-sticky:   1100;
  --pp-z-overlay:  1200;
  --pp-z-modal:    1300;
  --pp-z-popover:  1400;
  --pp-z-toast:    1500;
  --pp-z-tooltip:  1600;

  /* ======================================================================
     15. BREAKPOINTS (referência — media queries não leem custom properties)
     ====================================================================== */

  --pp-bp-sm:  640px;
  --pp-bp-md:  768px;
  --pp-bp-lg:  1024px;
  --pp-bp-xl:  1280px;
  --pp-bp-2xl: 1536px;

  /* ======================================================================
     16. LAYOUT
     ====================================================================== */

  --pp-sidebar-w:   288px;
  --pp-topbar-h:    62px;
  --pp-content-max: 1120px;
  --pp-gutter:      36px;
}