/**
 * Poupex Play 4.0 — Design System Tokens
 * Namespace: --pp4-*
 *
 * Fonte da verdade visual.
 * Referência: IDENTIDADE VISUAL OFICIAL 4.0 (2026-07-31)
 *   #0A0E17 Azul Noite · #123BF9 Azul Royal · #00E676 Verde Neon
 *   #1F2937 Cinza Escuro · #F5F7FA Branco · Inter
 *
 * Sprint 1 (redesign): valores realinhados à identidade oficial.
 * Nomes de token preservados — nada que já consumia --pp4-* quebra.
 */

:root {
  /* —— Color: surfaces —— (oficial: Azul Noite como base) */
  --pp4-color-bg: #0a0e17;          /* Azul Noite — fundo da aplicação */
  --pp4-color-bg-elevated: #0d1220; /* sidebar / topbar */
  --pp4-color-surface: #111827;     /* card padrão */
  --pp4-color-surface-2: #1f2937;   /* Cinza Escuro — card interno, hover */
  --pp4-color-surface-3: #293344;   /* terceiro plano */

  /* —— Color: brand —— (oficial: Azul Royal) */
  --pp4-color-navy: #0a0e17;
  --pp4-color-navy-deep: #05070d;
  --pp4-color-blue: #123bf9;        /* Azul Royal — primária oficial */
  --pp4-color-blue-bright: #5b8cff; /* variante clara acessível sobre azul */
  --pp4-color-blue-soft: rgba(18, 59, 249, 0.2);
  --pp4-color-blue-glow: rgba(18, 59, 249, 0.35);

  --pp4-color-purple: #7c3aed;
  --pp4-color-purple-bright: #a78bfa;
  --pp4-color-purple-soft: rgba(124, 58, 237, 0.2);
  --pp4-color-purple-glow: rgba(124, 58, 237, 0.4);

  /* Bloco A: os seis tokens dourados foram removidos. Eram o resíduo da
     marca anterior e contradiziam a identidade oficial — que tem cinco
     cores, nenhuma delas ouro. Ninguém os consumia na marcação. */

  /* —— Color: functional —— (oficial: Verde Neon) */
  --pp4-color-success: #00e676;     /* Verde Neon — sucesso / entrada */
  --pp4-color-success-soft: rgba(0, 230, 118, 0.14);
  --pp4-color-success-ink: #052e16; /* texto sobre Verde Neon — 9,8:1 */
  --pp4-color-lime: #b8f000; /* Trade operativo — não usar como CTA global */
  --pp4-color-warning: #f59e0b;
  --pp4-color-warning-soft: rgba(245, 158, 11, 0.16);
  --pp4-color-danger: #f43f5e;
  --pp4-color-danger-soft: rgba(244, 63, 94, 0.16);
  --pp4-color-pix: #00b4a0;
  --pp4-color-usdt: #26a17b;

  /* —— Color: text —— (oficial: #F5F7FA Branco) */
  --pp4-color-text: #f5f7fa;         /* Branco oficial — 18,1:1 sobre bg */
  --pp4-color-text-secondary: #d1d7e0;
  --pp4-color-text-muted: #9ca3af;   /* 6,9:1 sobre surface — mínimo aprovado */
  --pp4-color-text-subtle: #6b7280;  /* apenas decorativo — NÃO usar em texto */
  --pp4-color-text-inverse: #0a0e17;

  /* —— Color: borders —— */
  --pp4-color-border: rgba(245, 247, 250, 0.1);
  --pp4-color-border-strong: rgba(245, 247, 250, 0.18);
  --pp4-color-border-blue: rgba(18, 59, 249, 0.45);
  --pp4-color-border-success: rgba(0, 230, 118, 0.4);

  /* —— Gradients —— (uso restrito: hero e CTA de destaque) */
  --pp4-grad-hero: linear-gradient(135deg, #123bf9 0%, #0f2ea8 45%, #0a0e17 100%);
  --pp4-grad-navy: linear-gradient(160deg, #16203a 0%, #0f1626 48%, #0a0e17 100%);
  --pp4-grad-purple: linear-gradient(135deg, #a78bfa 0%, #7c3aed 55%, #5b21b6 100%);
  --pp4-grad-blue: linear-gradient(135deg, #2f6bff 0%, #123bf9 100%);
  --pp4-grad-success: linear-gradient(135deg, #00e676 0%, #00b85e 100%);

  /* —— Typography —— (oficial: Inter) */
  --pp4-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp4-font-display: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --pp4-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pp4-text-xs: 0.75rem;    /* 12 */
  --pp4-text-sm: 0.8125rem;  /* 13 */
  --pp4-text-md: 0.875rem;   /* 14 */
  --pp4-text-base: 1rem;     /* 16 */
  --pp4-text-lg: 1.125rem;   /* 18 */
  --pp4-text-xl: 1.25rem;    /* 20 */
  --pp4-text-2xl: 1.5rem;    /* 24 */
  --pp4-text-3xl: 1.875rem;  /* 30 */
  --pp4-text-4xl: 2.25rem;   /* 36 */

  --pp4-leading-tight: 1.2;
  --pp4-leading-snug: 1.35;
  --pp4-leading-normal: 1.5;
  --pp4-leading-relaxed: 1.65;

  --pp4-weight-regular: 400;
  --pp4-weight-medium: 500;
  --pp4-weight-semibold: 600;
  --pp4-weight-bold: 700;
  --pp4-weight-extrabold: 800;

  /* —— Spacing (4px base) —— */
  --pp4-space-0: 0;
  --pp4-space-1: 0.25rem;  /* 4 */
  --pp4-space-2: 0.5rem;   /* 8 */
  --pp4-space-3: 0.75rem;  /* 12 */
  --pp4-space-4: 1rem;     /* 16 */
  --pp4-space-5: 1.25rem;  /* 20 */
  --pp4-space-6: 1.5rem;   /* 24 */
  --pp4-space-8: 2rem;     /* 32 */
  --pp4-space-10: 2.5rem;  /* 40 */
  --pp4-space-12: 3rem;    /* 48 */
  --pp4-space-16: 4rem;    /* 64 */

  /* —— Radius —— */
  --pp4-radius-sm: 8px;
  --pp4-radius-md: 12px;
  --pp4-radius-lg: 16px;
  --pp4-radius-xl: 20px;
  --pp4-radius-2xl: 24px;
  --pp4-radius-pill: 999px;

  /* —— Elevation / shadow —— */
  --pp4-elev-1: 0 2px 8px rgba(0, 0, 0, 0.28);
  --pp4-elev-2: 0 8px 24px rgba(0, 0, 0, 0.4);
  --pp4-elev-3: 0 16px 40px rgba(0, 0, 0, 0.55);
  --pp4-elev-glow-blue: 0 0 0 1px var(--pp4-color-border-blue), 0 8px 28px var(--pp4-color-blue-glow);
  --pp4-elev-glow-purple: 0 0 0 1px rgba(124, 58, 237, 0.35), 0 8px 28px var(--pp4-color-purple-glow);

  /* —— Layout chrome —— */
  --pp4-sidebar-width: 248px;
  --pp4-sidebar-width-rail: 72px;   /* tablet: sidebar recolhida */
  --pp4-navbar-height: 64px;
  --pp4-navbar-height-mobile: 56px;
  --pp4-bottomnav-height: 64px;
  --pp4-content-max: 1520px;
  --pp4-content-gutter: clamp(16px, 2vw, 24px);

  /* —— Breakpoints —— (referência; media queries usam os literais) */
  --pp4-bp-sm: 480px;
  --pp4-bp-md: 768px;
  --pp4-bp-lg: 1024px;
  --pp4-bp-xl: 1440px;

  /* —— Motion —— */
  --pp4-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pp4-duration-fast: 120ms;
  --pp4-duration: 200ms;
  --pp4-duration-slow: 320ms;

  /* —— Icon sizes —— */
  --pp4-icon-sm: 16px;
  --pp4-icon-md: 20px;
  --pp4-icon-lg: 24px;
  --pp4-icon-xl: 32px;
  --pp4-icon-2xl: 48px;

  /* —— Control heights —— */
  --pp4-control-sm: 36px;
  --pp4-control-md: 44px;
  --pp4-control-lg: 52px;

  /* —— Z-index —— */
  --pp4-z-dropdown: 40;
  --pp4-z-sticky: 50;
  --pp4-z-overlay: 60;
  --pp4-z-modal: 70;
  --pp4-z-toast: 80;
}