/*
  Tokens de Konexia (design-system.md, seccion 3 "Paleta y tipografia").
  Solo variables. Ninguna regla de estilo va aqui: eso vive en konexia.css.
  Fuente de los colores y la tipografia: guia de marca konexia.png.
*/

:root {
  /* Marca */
  --color-primario: #6366F1;
  --color-secundario: #A855F7;
  --color-acento: #22D3EE;
  --color-exito: #10B981;
  --color-alerta: #F43F5E;
  /* Ambar de "pendiente": avisos, notas internas, revisiones (texto oscuro para contraste) */
  --color-pendiente: #F59E0B;
  --color-pendiente-oscuro: #B45309;
  /* Colores de las redes (iconos de cuenta) */
  --color-facebook: #1877F2;
  --color-instagram-1: #F58529;
  --color-instagram-2: #DD2A7B;
  --color-instagram-3: #8134AF;
  --color-whatsapp: #25D366;
  --color-youtube: #FF0000;
  --color-linkedin: #0A66C2; /* publicar-en-linkedin: paginas y perfiles de LinkedIn */
  --color-tiktok: #000000; /* publicar-en-tiktok: cuentas de TikTok (negro de la marca) */
  --color-calendar: #4285f4; /* citas-google-calendar: Google Calendar del cliente */
  /* Movil de la vista previa del compositor (marco y pantalla de la maqueta) */
  --color-telefono-marco: #111827;
  --color-telefono-borde: #374151;
  --color-maqueta-texto: #262626;
  --color-maqueta-gris: #737373;
  --color-maqueta-borde: #EFEFEF;
  --color-maqueta-negro: #000000;
  --color-maqueta-activo: #0095F6; /* el punto de la lámina visible en un carrusel, el azul de Instagram */

  /* Neutros (derivados de la guia, no literales de ella) */
  --color-texto: #0F172A;
  --color-texto-tenue: #64748B;
  --color-fondo: #F8FAFC;
  --color-superficie: #FFFFFF;
  --color-borde: #E2E8F0;

  /* Degradado de marca (botones principales y acentos de titular de la web
     comercial y del login): del primario a una mezcla primario+acento */
  --degradado-marca: linear-gradient(120deg, var(--color-secundario) 0%, var(--color-primario) 45%, color-mix(in srgb, var(--color-primario) 70%, var(--color-acento)) 100%);
  /* Tipografia */
  --fuente-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Solo notas decorativas manuscritas de la web comercial */
  --fuente-manuscrita: 'Caveat', cursive;

  /* Forma */
  --radio-base: 10px;
  --radio-pill: 999px;
  --sombra-tarjeta: 0 1px 3px rgba(15, 23, 42, 0.08);
  --sombra-modal: 0 20px 45px rgba(15, 23, 42, 0.25);

  /* Espaciado */
  --espacio-gutter: 24px;

  /* Movimiento (design-system.md seccion 11) */
  --duracion-hover: 150ms;
  --duracion-modal: 120ms;
  --curva-entrada: ease-out;
  --curva-salida: ease-in;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-hover: 0ms;
    --duracion-modal: 0ms;
  }
}