/* 
 * Variables de color para la landing page de Pide
 * Paleta diseñada para generar confianza y acción
 */

:root {
  /* Colores principales */
  --color-primary: #0B3C6F;        /* Azul profundo - Confianza / SaaS */
  --color-secondary: #0FA958;      /* Verde fresco - Venta / WhatsApp / OK */
  
  /* Colores de fondo */
  --color-bg: #FFFFFF;             /* Blanco */
  --color-surface: #F5F7FA;        /* Gris claro para fondos */
  
  /* Colores de texto */
  --color-text: #1F2933;           /* Texto principal */
  --color-text-muted: #4A4A4A;     /* Texto secundario */
  
  /* Colores de acción (CTAs) */
  --color-cta: #FFC72C;            /* Amarillo cálido - Acción / Pedido */
  --color-cta-hover: #FFB703;      /* Amarillo hover */
  --color-accent: #FF8A00;         /* Naranja suave - Acento / Urgencia */
  
  /* Transiciones suaves */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --color-primary: #3B82F6;
  --color-secondary: #22C55E;
  --color-bg: #0F172A;
  --color-surface: #111827;
  --color-text: #E5E7EB;
  --color-text-muted: #9CA3AF;
  --color-cta: #FACC15;
  --color-cta-hover: #EAB308;
}

/* Estilos base para la landing */
.landing-container {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.landing-surface {
  background-color: var(--color-surface);
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-cta {
  background-color: var(--color-cta);
}

.bg-cta:hover {
  background-color: var(--color-cta-hover);
}