/*
 * Proyecto: Landing Plus
 * Ruta: /wp-content/themes/toozle/toozle/_stock/assets/colors.css
 * Archivo: colors.css
 *
 * Variables de color del sistema + overrides de Bootstrap.
 * Se carga DESPUÉS de base.css, ANTES del colors.css del cliente.
 *
 * Para personalizar un cliente: crear {cliente}/assets/colors.css
 * y redefinir solo las variables que difieren. No copiar todo este archivo.
 */

:root {
  /* ── Paleta principal ─────────────────────────────────────────────────── */
  --primary:            #0d6efd;
  --accent:             #6f42c1;
  --dark:               #111111;
  --text:               #212529;
  --muted:              #6c757d;
  --light:              #f5f5f5;
  --white:              #ffffff;
  --border:             #dadde1;
  --whatsapp:           #25d366;

  /* ── Derivados de --whatsapp ──────────────────────────────────────────── */
  --whatsapp-hover:     #1fb85a;
  --whatsapp-pulse:     rgba(37, 211, 102, 0.50);   /* sombra del sticky      */

  /* ── WhatsApp por botón (sesión 2026-05-10) ──────────────────────────────
     Defaults: verde de WhatsApp para los dos botones. El tab "Estilos" del
     panel puede pisar cada uno por separado.
     - --whatsapp-floating / -hover → .whatsapp-sticky-button (botón redondo)
     - --whatsapp-cta / -hover      → .btn-whatsapp (CTA del hero y bloques)
     Las vars legacy --whatsapp / --whatsapp-hover quedan apuntando al
     flotante por retrocompatibilidad: cualquier consumidor viejo (overrides
     en colors.css de cliente, partials no migrados) sigue funcionando.
     ─────────────────────────────────────────────────────────────────────── */
  --whatsapp-floating:        #25d366;
  --whatsapp-floating-hover:  #1fb85a;
  --whatsapp-cta:             #25d366;
  --whatsapp-cta-hover:       #1fb85a;

  /* ── Derivados de --primary ───────────────────────────────────────────── */
  --primary-hover:      #0b5ed7;       /* btn-primary hover, gradiente form   */
  --primary-deep:       #0950c5;       /* hover profundo (ej: form btn hover) */
  --primary-alpha-08:   rgba(13, 110, 253, 0.08);   /* eyebrow bg             */
  --primary-alpha-10:   rgba(13, 110, 253, 0.10);   /* icon-circle bg         */
  --primary-alpha-12:   rgba(13, 110, 253, 0.12);   /* step-number, accordion */
  --primary-alpha-18:   rgba(13, 110, 253, 0.18);   /* eyebrow border, focus  */
  --primary-alpha-38:   rgba(13, 110, 253, 0.38);   /* pricing featured border */
  --primary-shadow:     rgba(13, 110, 253, 0.16);   /* pricing featured shadow */

  /* ── Derivados de --accent ────────────────────────────────────────────── */
  --accent-hover:       #5f35ad;

  /* ── Hero por defecto (gradiente) ────────────────────────────────────── */
  --hero-gradient:      linear-gradient(135deg, #0f172a 0%, #14213d 48%, #0d6efd 100%);
  --hero-gradient-dark: #0f172a;       /* fallback color para hero-has-bg     */

  /* ── Placeholders ────────────────────────────────────────────────────── */
  --placeholder-gradient:       linear-gradient(135deg, #e2e8f0, #cbd5e1);
  --photo-placeholder-gradient: linear-gradient(135deg, #f8f9fa, #eef1f4);

  /* ── Input border ────────────────────────────────────────────────────── */
  --input-border:       #d9e2ec;

  /* ── Bootstrap sync ──────────────────────────────────────────────────── */
  --bs-primary:         #0d6efd;
  --bs-primary-rgb:     13, 110, 253;
  --bs-link-color:      #0d6efd;
  --bs-link-hover-color: #0b5ed7;
}

/* ── Bootstrap: utilidades de color ──────────────────────────────────────── */
/* Bootstrap no lee nuestras variables automáticamente.                       */
/* Estos overrides aseguran que btn-primary, text-primary, etc.               */
/* usen --primary del cliente sin importar cuál sea.                          */

.bg-primary,
.text-bg-primary,
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.bg-primary:hover,
.text-bg-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.text-primary,
.link-primary {
  color: var(--primary) !important;
}

.card.bg-primary,
.card.text-bg-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

/* ── Bootstrap: accordion ─────────────────────────────────────────────────── */
.accordion {
  --bs-accordion-active-bg:            var(--primary-alpha-12);
  --bs-accordion-active-color:         var(--text);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--primary-alpha-18);
  --bs-accordion-btn-icon-width:       1rem;
}

.accordion-button:not(.collapsed) {
  background: var(--primary-alpha-12);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem var(--primary-alpha-18);
  border-color: var(--primary-alpha-18);
}