/* ══════════════════════════════════════════════════════════════
   SUPER PET - ESTILOS GLOBAIS
   Variáveis CSS e estilos base reutilizáveis em todo o sistema
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   VARIÁVEIS CSS - TEMA ESCURO (PADRÃO)
   ──────────────────────────────────────────────────────────── */
:root {
  /* Cores de fundo */
  --bg: #080b14;
  --surface: #0e1220;
  --card: #131929;
  
  /* Bordas */
  --border: #1a2540;
  --border2: #253055;
  
  /* Cores de destaque - palette mais vibrante */
  --blue: #4d8dff;
  --green: #1fd97a;
  --amber: #f5a623;
  --red: #ff4545;
  --purple: #b06aff;
  --teal: #14b8a6;
  --pink: #ec4899;
  --orange: #f97316;
  
  /* Textos */
  --txt: #dce6f7;
  --txt2: #6b7fa3;
  --txt3: #323d5c;
  
  /* Fontes */
  --mono: 'DM Mono', monospace;
  
  /* Gradientes */
  --grad-blue: linear-gradient(135deg, #4d8dff, #7b5bf6);
  --grad-green: linear-gradient(135deg, #1fd97a, #14b8a6);
  --grad-red: linear-gradient(135deg, #ff4545, #ec4899);
  --grad-amber: linear-gradient(135deg, #f5a623, #f97316);
  --grad-purple: linear-gradient(135deg, #b06aff, #ec4899);
  
  /* Glassmorphism helpers */
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
}

/* ────────────────────────────────────────────────────────────
   VARIÁVEIS CSS - TEMA CLARO
   ──────────────────────────────────────────────────────────── */
body.light-theme {
  --bg: #f0f4fb;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #dde4f0;
  --border2: #c5d0e4;
  --txt: #0f172a;
  --txt2: #475569;
  --txt3: #94a3b8;
  --glass: rgba(0,0,0,0.02);
  --glass-border: rgba(0,0,0,0.06);
}

/* ────────────────────────────────────────────────────────────
   RESET E ESTILOS BASE
   ──────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}

/* ────────────────────────────────────────────────────────────
   UTILITÁRIOS
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 14px;
}

.card-p {
  padding: 20px;
}

/* ────────────────────────────────────────────────────────────
   SCROLLBAR CUSTOMIZADO
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ────────────────────────────────────────────────────────────
   ANIMAÇÕES
   ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}