/* =============================================================
   Vendas Pay — Design Tokens
   Linguagem visual fintech: clara, sofisticada e profissional.
   ============================================================= */

:root {
  /* Cor primária — Laranja vibrante Vendas Pay (logo oficial) */
  --vp-primary:        #ff6b1a;
  --vp-primary-600:    #e85a0d;
  --vp-primary-700:    #c44b08;
  --vp-primary-200:    #ffd0b0;
  --vp-primary-100:    #ffe4d0;
  --vp-primary-50:     #fff5ec;
  --vp-primary-rgb:    255, 107, 26;

  /* Acentos — tom complementar para gradientes/destaques */
  --vp-accent:         #ff9248;
  --vp-accent-100:     #ffe8d4;
  --vp-accent-rgb:     255, 146, 72;

  /* Status */
  --vp-success:        #0f9f6e;
  --vp-success-100:    #d1fae5;
  --vp-warn:           #d97706;
  --vp-warn-100:       #fef3c7;
  --vp-danger:         #dc2626;
  --vp-danger-100:     #fee2e2;
  --vp-info:           #2563eb;
  --vp-info-100:       #dbeafe;

  /* Neutros */
  --vp-n50:            #f8fbfd;
  --vp-n100:           #eef3f9;
  --vp-n200:           #dce6f1;
  --vp-n300:           #c4d2e0;
  --vp-n400:           #8ea1b5;
  --vp-n500:           #64778c;
  --vp-n600:           #46576a;
  --vp-n700:           #2b394b;
  --vp-n800:           #162436;
  --vp-n900:           #091625;

  /* Superficies */
  --vp-bg:             #f4f7fb;
  --vp-bg-elevated:    #eef3f9;
  --vp-surface:        #ffffff;
  --vp-surface-alt:    #f8fbff;
  --vp-surface-soft:   #f2f7fd;
  --vp-border:         #e5ecf5;
  --vp-border-strong:  #d3deea;
  --vp-text:           #091625;
  --vp-text-muted:     #62758a;

  /* Espacamento */
  --sp-1:  0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5:  1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* Tipografia — Nunito (servida local em /assets/fonts) */
  --font-sans:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --fs-xs:   0.75rem;   --lh-xs: 1.1rem;
  --fs-sm:   0.875rem;  --lh-sm: 1.35rem;
  --fs-base: 0.9375rem; --lh-base: 1.6rem;
  --fs-lg:   1.0625rem; --lh-lg: 1.7rem;
  --fs-xl:   1.25rem;   --lh-xl: 1.8rem;
  --fs-2xl:  1.625rem;  --lh-2xl: 2.1rem;
  --fs-3xl:  2rem;      --lh-3xl: 2.5rem;
  --fs-4xl:  2.5rem;    --lh-4xl: 2.9rem;
  --fs-money:3rem;      --lh-money:3.2rem;

  /* Raios */
  --r-xs:   8px;
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 9999px;

  /* Sombras */
  --sh-xs:   0 1px 2px rgba(9, 22, 37, .04), 0 10px 24px rgba(9, 22, 37, .04);
  --sh-card: 0 10px 30px rgba(9, 22, 37, .08), 0 2px 8px rgba(9, 22, 37, .04);
  --sh-pop:  0 24px 60px rgba(9, 22, 37, .18), 0 8px 24px rgba(9, 22, 37, .08);
  --sh-fab:  0 16px 30px rgba(var(--vp-primary-rgb), .28);

  /* Layout */
  --layout-max: 1360px;
  --sidebar-w:  292px;
  --sidebar-gap: 20px;
  --top-h:      88px;

  /* Z-index */
  --z-nav: 50;
  --z-modal: 90;
  --z-toast: 95;

  /* Mobile */
  --tap-min: 46px;
  --bn-h:    56px;
}

/* Em desktop reduzimos um pouco a escala tipográfica — o conteúdo cabe melhor
   e os títulos não competem visualmente com o conteúdo. */
@media (min-width: 768px) {
  :root {
    --fs-xs:   0.7rem;     --lh-xs: 1rem;
    --fs-sm:   0.8125rem;  --lh-sm: 1.2rem;
    --fs-base: 0.875rem;   --lh-base: 1.45rem;
    --fs-lg:   0.95rem;    --lh-lg: 1.55rem;
    --fs-xl:   1.125rem;   --lh-xl: 1.65rem;
    --fs-2xl:  1.375rem;   --lh-2xl: 1.85rem;
    --fs-3xl:  1.625rem;   --lh-3xl: 2.05rem;
    --fs-4xl:  2rem;       --lh-4xl: 2.4rem;
    --fs-money:2.25rem;    --lh-money: 2.5rem;
  }
}

/* Modo noturno: regras completas em /assets/css/dark.css (carregado por p-header.php) */

/* Light theme: garante que sol fica escondido e lua aparece (toggle padrão) */
:root:not([data-theme="dark"]) .vp-theme-toggle .icon-sun  { display: none; }
:root:not([data-theme="dark"]) .vp-theme-toggle .icon-moon { display: inline-flex; }