/* ===========================================================
   VQEN Appetity — Design Tokens
   Use estas vars em código novo. Substituições em código antigo
   devem ser cirúrgicas (não regex global) pra não quebrar strings.
   =========================================================== */
:root {
  /* === Brand === */
  --vqen-primary: #7c3aed;
  --vqen-primary-hover: #6d28d9;
  --vqen-primary-soft: #ede9fe;
  --vqen-dark: #0d2818;
  --vqen-dark-2: #1a3a28;

  /* === Status === */
  --color-success: #10b981;
  --color-success-bg: #d1fae5;
  --color-success-fg: #065f46;
  --color-error: #ef4444;
  --color-error-bg: #fee2e2;
  --color-error-fg: #991b1b;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-warning-fg: #78350f;
  --color-info: #0ea5e9;
  --color-info-bg: #dbeafe;
  --color-info-fg: #1e3a8a;

  /* === Neutros === */
  --bg-base: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-muted: #f1f5f9;
  --bg-emphasis: #e2e8f0;
  --border-base: #e2e8f0;
  --border-strong: #cbd5e1;
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-4: #94a3b8;

  /* === Tipografia === */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Espaçamento (scale 4px) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* === Radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === Sombras === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.10);

  /* === Z-Index (camadas únicas) === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 800;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-modal-stacked: 1100;
  --z-popover: 1500;
  --z-tooltip: 2000;
  --z-toast: 3000;
  --z-loading: 4000;

  /* === Animação === */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================================
   Loading Spinners + Skeleton + Toast (B3)
   =========================================================== */
.vqen-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vqen-spin 0.75s linear infinite;
  vertical-align: middle;
}
.vqen-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.vqen-spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
@keyframes vqen-spin { to { transform: rotate(360deg); } }

.vqen-skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-emphasis) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: vqen-skel 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}
@keyframes vqen-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.vqen-loading-overlay {
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-loading);
}

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vqen-spin 0.75s linear infinite;
  color: white;
}

/* Toast container global (caso JS não tenha helper próprio) */
.vqen-toast-host {
  position: fixed; top: 20px; right: 20px;
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
.vqen-toast {
  background: var(--vqen-dark);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: vqen-toast-in 0.25s var(--easing);
  max-width: 360px;
}
.vqen-toast.success { background: var(--color-success); }
.vqen-toast.error   { background: var(--color-error); }
.vqen-toast.warning { background: var(--color-warning); color: var(--vqen-dark); }
.vqen-toast.info    { background: var(--color-info); }
@keyframes vqen-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 480px) {
  .vqen-toast-host { left: 16px; right: 16px; top: 12px; }
  .vqen-toast { max-width: none; }
}