/**
 * Kian AI - Variables de Color y Tema
 * Sistema de diseño actualizado: Grises técnicos y eliminación de degradados claros.
 */

/* Tipografía cargada vía CDN */

:root {
  /* --- PALETA BASE --- */
  --indigo: hsl(240, 40%, 25%);
  --cyan: hsl(180, 70%, 40%);
  --lime-green: hsl(90, 70%, 40%);

  /* Degradado Principal (Solo para textos de título o bordes sutiles, NO para burbujas) */
  --primary-gradient: linear-gradient(135deg, var(--indigo), var(--cyan));

  --primary: var(--cyan);
  --secondary: var(--lime-green);

  /* --- TEMA OSCURO (Default) --- */
  --bg-primary: hsl(240, 30%, 8%);
  /* Índigo muy profundo */
  --bg-secondary: hsl(240, 30%, 12%);
  /* Panel oscuro */
  --bg-tertiary: hsl(240, 30%, 18%);
  /* Hover oscuro */

  /* Glassmorphism Dark */
  --glass-bg: hsla(240, 30%, 8%, 0.85);

  /* Texto Dark */
  --text-primary: hsl(180, 25%, 95%);
  --text-secondary: hsl(180, 15%, 70%);
  --text-tertiary: hsl(180, 10%, 50%);

  /* --- BURBUJAS DE MENSAJE (OSCURO) --- */
  /* Usuario: Gris Oscuro Azulado */
  --msg-user-bg: hsl(240, 20%, 28%);
  --msg-user-text: #ffffff;

  /* Bot: Gris Oscuro Azulado */
  --msg-bot-bg: hsl(240, 25%, 16%);
  --msg-bot-text: var(--text-primary);

  /* UI Elements */
  --input-bg: hsla(240, 30%, 10%, 0.6);
  --border-color: transparent;

  --success: hsl(130, 70%, 50%);
  --error: hsl(0, 80%, 60%);
  --warning: hsl(40, 100%, 60%);

  /* Bordes y sombras */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 20px;
  --border-radius-full: 9999px;

  --shadow-color: hsla(0, 0%, 0%, 0.4);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 10px var(--shadow-color);
  --shadow-lg: 0 8px 25px var(--shadow-color);

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Layout */
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --header-height: 56px;
  --z-sticky: 100;
  --z-modal: 1000;

  /* Fuentes */
  --font-family-base: 'Poppins', sans-serif;
  --font-family-mono: 'Fira Code', monospace;
  --font-size-sm: 0.8rem;
  --font-size-base: 0.95rem;
  --font-size-xl: 1.25rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

/* --- TEMA CLARO (Gris Técnico Oscurecido -10%) --- */
[data-theme="light"] {
  /* Fondo: Gris Plata Oscuro (88% -> 78%) */
  --bg-primary: hsl(210, 10%, 78%);
  /* Paneles: (82% -> 72%) */
  --bg-secondary: hsl(210, 10%, 72%);
  /* Hover/Detalles: (75% -> 65%) */
  --bg-tertiary: hsl(210, 10%, 65%);

  /* Glassmorphism Light (85% -> 75%) */
  --glass-bg: hsla(210, 10%, 75%, 0.9);

  /* Textos: Mantener contraste alto */
  --text-primary: hsl(210, 20%, 10%);
  /* Un poco más negro para compensar el fondo más oscuro */
  --text-secondary: hsl(210, 20%, 25%);
  --text-tertiary: hsl(210, 15%, 40%);

  /* --- BURBUJAS DE MENSAJE (CLARO) --- */
  /* Usuario: Gris Pizarra */
  --msg-user-bg: hsl(210, 15%, 55%);
  --msg-user-text: #ffffff;

  /* Bot: Gris Claro (94% -> 85%) para mantener armonía pero pop-out */
  --msg-bot-bg: hsl(210, 10%, 85%);
  --msg-bot-text: var(--text-primary);

  /* UI Elements */
  --input-bg: hsla(210, 10%, 70%, 0.8);
  /* (80% -> 70%) */
  --shadow-color: hsla(210, 10%, 10%, 0.2);
  /* Sombra un poco más fuerte */

  /* Iconos y acentos */
  --primary: hsl(215, 70%, 35%);
  /* Azul más profundo */
}