/* ==========================================================================
   VIPFX Design System — Tokens  (v1.1.0)
   Fonte única de cores, tipografia, espaçamento, raios, sombras e movimento.
   Tema: somente escuro. Base slate-950, destaque esmeralda, secundária âmbar.
   Extraído de: rnd, ws, dash, Site aegis, sgo, gfp, cjc, slc, fq, roboforex,
   vantage, ea (análise de 2026-11-11).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;

  /* ---------- Superfícies (do mais fundo ao mais elevado) ---------- */
  --vx-bg:            #020617; /* slate-950 — fundo da página */
  --vx-bg-header:     rgba(2, 6, 23, 0.85); /* header fixo com blur */
  --vx-surface:       #0f172a; /* slate-900 — cards */
  --vx-surface-2:     #151e2e; /* slate-850 — card dentro de card, linhas zebra */
  --vx-surface-3:     #1e293b; /* slate-800 — elevado, hover, chips */
  --vx-input:         #020617; /* inputs ficam "afundados" no card */
  --vx-glass:         rgba(15, 23, 42, 0.85);
  --vx-overlay:       rgba(2, 6, 23, 0.80); /* fundo de modal */

  /* ---------- Bordas ---------- */
  --vx-border:        #1e293b; /* slate-800 — divisórias, cards */
  --vx-border-strong: #334155; /* slate-700 — inputs, botões secundários */
  --vx-border-glass:  rgba(255, 255, 255, 0.06);

  /* ---------- Texto ---------- */
  --vx-text-strong:   #ffffff; /* títulos, valores */
  --vx-text:          #e2e8f0; /* slate-200 — corpo em destaque */
  --vx-text-body:     #cbd5e1; /* slate-300 — corpo padrão */
  --vx-text-muted:    #94a3b8; /* slate-400 — legendas, rótulos */
  --vx-text-subtle:   #64748b; /* slate-500 — dicas, placeholders, rodapé */
  --vx-text-on-brand: #020617; /* texto sobre esmeralda/âmbar */

  /* ---------- Marca ---------- */
  --vx-brand:         #10b981; /* emerald-500 — botão primário */
  --vx-brand-hover:   #34d399; /* emerald-400 — hover do primário */
  --vx-brand-active:  #059669; /* emerald-600 */
  --vx-brand-text:    #34d399; /* esmeralda como texto/ícone/link */
  --vx-brand-soft:    rgba(16, 185, 129, 0.10); /* fundo de badge/ícone */
  --vx-brand-line:    rgba(16, 185, 129, 0.25); /* borda de badge/ícone */

  --vx-accent:        #fbbf24; /* amber-400 — secundária: premium, destaque, títulos de seção */
  --vx-accent-hover:  #f59e0b; /* amber-500 */
  --vx-accent-deep:   #d97706; /* amber-600 — fim de gradiente */
  --vx-accent-soft:   rgba(251, 191, 36, 0.10);
  --vx-accent-line:   rgba(251, 191, 36, 0.30);

  /* ---------- Semânticas (finanças: ganho = verde, perda = vermelho) ---------- */
  --vx-success:       #34d399;
  --vx-success-soft:  rgba(52, 211, 153, 0.10);
  --vx-danger:        #f87171; /* red-400 — texto/ícone */
  --vx-danger-solid:  #ef4444; /* red-500 — botão destrutivo */
  --vx-danger-soft:   rgba(239, 68, 68, 0.10);
  --vx-danger-line:   rgba(239, 68, 68, 0.30);
  --vx-warning:       #fbbf24;
  --vx-warning-soft:  rgba(251, 191, 36, 0.10);
  --vx-info:          #60a5fa; /* blue-400 */
  --vx-info-solid:    #3b82f6;
  --vx-info-soft:     rgba(59, 130, 246, 0.10);
  --vx-info-line:     rgba(59, 130, 246, 0.25);
  --vx-whatsapp:      #25d366;

  /* ---------- Série de dados (gráficos, nesta ordem) ---------- */
  --vx-chart-1: #34d399; /* esmeralda */
  --vx-chart-2: #22d3ee; /* ciano */
  --vx-chart-3: #fbbf24; /* âmbar */
  --vx-chart-4: #60a5fa; /* azul */
  --vx-chart-5: #c084fc; /* roxo */
  --vx-chart-6: #f87171; /* vermelho — reservar para perda/negativo */
  --vx-chart-grid: rgba(148, 163, 184, 0.10);
  --vx-chart-axis: #64748b;

  /* ---------- Tipografia ---------- */
  --vx-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vx-font-heading: "Montserrat", "Inter", sans-serif;
  --vx-font-mono:    "Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Escala (rem) — espelha a escala do Tailwind usada nos projetos */
  --vx-text-2xs: 0.625rem;  /* 10px — rótulos de KPI em caixa alta */
  --vx-text-xs:  0.75rem;   /* 12px */
  --vx-text-sm:  0.875rem;  /* 14px — padrão de interfaces densas */
  --vx-text-md:  1rem;      /* 16px — padrão de landing */
  --vx-text-lg:  1.125rem;  /* 18px */
  --vx-text-xl:  1.25rem;   /* 20px — título de card */
  --vx-text-2xl: 1.5rem;    /* 24px — título de seção (app) / KPI */
  --vx-text-3xl: 1.875rem;  /* 30px */
  --vx-text-4xl: 2.25rem;   /* 36px — H1 de app / H2 de landing */
  --vx-text-5xl: 3rem;      /* 48px — hero */
  --vx-text-6xl: 3.75rem;   /* 60px — hero desktop */

  --vx-leading-tight: 1.15;
  --vx-leading-snug:  1.35;
  --vx-leading-body:  1.6;

  --vx-tracking-tight: -0.025em;
  --vx-tracking-wide:  0.05em;
  --vx-tracking-wider: 0.1em;  /* rótulos uppercase */

  /* ---------- Espaçamento (base 4px) ---------- */
  --vx-space-1: 0.25rem;
  --vx-space-2: 0.5rem;
  --vx-space-3: 0.75rem;
  --vx-space-4: 1rem;
  --vx-space-5: 1.25rem;
  --vx-space-6: 1.5rem;
  --vx-space-8: 2rem;
  --vx-space-10: 2.5rem;
  --vx-space-12: 3rem;
  --vx-space-16: 4rem;
  --vx-space-24: 6rem; /* respiro entre seções de landing */

  /* ---------- Raios ---------- */
  --vx-radius-sm:   0.375rem; /* 6px  — tags pequenas */
  --vx-radius:      0.5rem;   /* 8px  — botões, inputs (rounded-lg) */
  --vx-radius-lg:   0.75rem;  /* 12px — ícones, cards internos (rounded-xl) */
  --vx-radius-xl:   1rem;     /* 16px — cards, modais (rounded-2xl) */
  --vx-radius-full: 9999px;   /* badges, pílulas, avatares */

  /* ---------- Sombras e brilhos ---------- */
  --vx-shadow-card:  0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --vx-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --vx-glow-brand:   0 0 15px rgba(52, 211, 153, 0.25);
  --vx-glow-accent:  0 0 20px rgba(251, 191, 36, 0.30);
  --vx-glow-hover:   0 15px 30px -10px rgba(16, 185, 129, 0.15);
  --vx-ring:         0 0 0 3px rgba(16, 185, 129, 0.35);

  /* ---------- Movimento ---------- */
  --vx-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --vx-dur-fast:  150ms;
  --vx-dur:       200ms;
  --vx-dur-slow:  300ms;

  /* ---------- Layout ---------- */
  --vx-container:        80rem;  /* 1280px — max-w-7xl */
  --vx-container-narrow: 48rem;  /* 768px  — texto, formulários longos */
  --vx-header-h:         4rem;
  --vx-gutter:           1rem;   /* 16px no celular */
  --vx-blur:             12px;

  /* ---------- Camadas ---------- */
  --vx-z-header: 1000;
  --vx-z-modal:  2000;
  --vx-z-toast:  3000;
}

@media (min-width: 640px) {
  :root { --vx-gutter: 1.5rem; }
}
@media (min-width: 1024px) {
  :root { --vx-gutter: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --vx-dur-fast: 0ms; --vx-dur: 0ms; --vx-dur-slow: 0ms; }
}