/* ===========================
   CLOSER PAY - LANDING THEME
   Variáveis e estilos base (espelho da v2)
   =========================== */

:root {
  /* Cores Principais */
  --cp-primary: #00D09C;
  --cp-primary-hover: #00B889;
  --cp-primary-light: rgba(0, 208, 156, 0.1);

  /* Backgrounds */
  --cp-bg-main: #1a1d29;
  --cp-bg-card: #23273a;
  --cp-bg-hover: rgba(255, 255, 255, 0.05);
  --cp-bg-sidebar: #1e2030;

  /* Textos */
  --cp-text-primary: #ffffff;
  --cp-text-secondary: #a8b3cf;
  --cp-text-muted: #6b7280;

  /* Borders */
  --cp-border: rgba(255, 255, 255, 0.1);

  /* Glassmorphism */
  --cp-glass-bg: rgba(255, 255, 255, 0.05);
  --cp-glass-border: rgba(255, 255, 255, 0.1);

  /* Shadows */
  --cp-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --cp-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);

  /* Status Colors */
  --cp-success: #22c55e;
  --cp-warning: #f59e0b;
  --cp-danger: #ef4444;
  --cp-info: #3b82f6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--cp-bg-main);
  color: var(--cp-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

/* ===========================
   BUTTONS
   =========================== */

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.cp-btn-primary {
  background-color: var(--cp-primary);
  color: #1a1d29;
}

.cp-btn-primary:hover {
  background-color: var(--cp-primary-hover);
  color: #1a1d29;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 208, 156, 0.4);
}

.cp-btn-outline {
  background-color: transparent;
  border: 1px solid var(--cp-border);
  color: var(--cp-text-secondary);
}

.cp-btn-outline:hover {
  background-color: var(--cp-bg-hover);
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}

/* Outline claro para uso no header (texto branco) */
.cp-btn-outline-light {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--cp-text-primary);
}

.cp-btn-outline-light:hover {
  background-color: var(--cp-bg-hover);
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}

/* CTA outline (fundo escuro: borda branca, texto branco) */
.cp-btn-cta-outline {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: var(--cp-text-primary);
}

.cp-btn-cta-outline:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--cp-primary);
  color: var(--cp-primary);
}

/* ===========================
   CARDS
   =========================== */

.cp-card {
  background-color: var(--cp-bg-card);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--cp-border);
  transition: all 0.3s;
}

.cp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cp-shadow);
}

.cp-card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--cp-text-secondary);
}