/* ════════════════════════════════════════════════════════
   COGNITIVE LAYER — DESIGN TOKENS
   Fuente única de verdad para el sistema de diseño.
   Usar en el sitio institucional Y en la plataforma SaaS.
   ════════════════════════════════════════════════════════ */

:root {

  /* ── BACKGROUNDS ────────────────────────────────────── */
  --cl-bg-main:        #05070D;   /* Fondo base de página */
  --cl-bg-deep:        #03050A;   /* Fondo más profundo (footer, overlays) */
  --cl-bg-surface:     #0A1020;   /* Superficies elevadas (sidebars, modales) */
  --cl-bg-card:        #0B1224;   /* Cards, paneles, contenedores */

  /* ── TEXTO ──────────────────────────────────────────── */
  --cl-text-primary:   #F5F8FF;   /* Títulos, texto principal */
  --cl-text-secondary: #B8C4D9;   /* Subtítulos, descripciones */
  --cl-text-muted:     #6F7D96;   /* Labels, metadata, placeholders */

  /* ── COLORES DE MARCA ────────────────────────────────── */
  --cl-cyan-main:      #00E5F0;   /* Acento principal — CTAs, iconos activos */
  --cl-cyan-soft:      #38F3FF;   /* Acento suave — glows, gradientes */
  --cl-blue-main:      #2575FF;   /* Acento secundario — links, pills */
  --cl-indigo-main:    #4B5DFF;   /* Acento terciario — variantes */

  /* ── BORDES ─────────────────────────────────────────── */
  --cl-border-soft:    rgba(0, 229, 240, 0.18);   /* Borde estándar de cards/nav */
  --cl-border-hover:   rgba(0, 229, 240, 0.38);   /* Borde en hover */
  --cl-border-subtle:  rgba(0, 229, 240, 0.07);   /* Separadores internos */
  --cl-border-blue:    rgba(37, 117, 255, 0.15);  /* Bordes con tono azul */

  /* ── GLOWS / SOMBRAS ─────────────────────────────────── */
  --cl-glow-cyan:      rgba(0, 229, 240, 0.35);   /* Glow fuerte */
  --cl-glow-cyan-soft: rgba(0, 229, 240, 0.08);   /* Glow sutil (card hover) */
  --cl-glow-blue:      rgba(37, 117, 255, 0.13);  /* Glow azul (bg radial) */

  /* ── GRADIENTES ─────────────────────────────────────── */
  --cl-gradient-text:  linear-gradient(90deg, #38F3FF 0%, #00E5F0 45%, #2575FF 100%);
  --cl-gradient-btn:   linear-gradient(135deg, #00E5F0, #2575FF);
  --cl-gradient-bg:
    radial-gradient(circle at 8%  15%, rgba(0,229,240,0.11), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(37,117,255,0.13), transparent 32%);

  /* ── TIPOGRAFÍA ─────────────────────────────────────── */
  --cl-font-body:      'Inter', sans-serif;         /* Cuerpo, UI */
  --cl-font-brand:     'Space Grotesk', sans-serif; /* Títulos, marca */
  /* Alternativa de marca: 'Syne', sans-serif       */

  /* ── RADIO / ESPACIADO ───────────────────────────────── */
  --cl-radius-sm:      6px;
  --cl-radius-md:      10px;
  --cl-radius-lg:      16px;
  --cl-radius-xl:      24px;

  /* ── TRANSICIONES ────────────────────────────────────── */
  --cl-transition-fast:   0.2s ease;
  --cl-transition-normal: 0.3s ease;

  /* ── LAYOUT ─────────────────────────────────────────── */
  --cl-max-width:      1200px;
  --cl-nav-height:     68px;
}

/* ════════════════════════════════════════════════════════
   TOKENS ESPECÍFICOS — PLATAFORMA SAAS
   Variables adicionales para el panel de gestión.
   ════════════════════════════════════════════════════════ */

:root {

  /* ── SIDEBAR ─────────────────────────────────────────── */
  --cl-sidebar-width:       240px;
  --cl-sidebar-collapsed:   64px;
  --cl-sidebar-bg:          var(--cl-bg-surface);
  --cl-sidebar-border:      var(--cl-border-soft);

  /* ── ROLES — colores de badge por nivel de acceso ──────*/
  --cl-role-superadmin:     #A78BFA;   /* Violeta — Super Admin */
  --cl-role-admin:          var(--cl-cyan-main);   /* Cyan — Admin Cliente */
  --cl-role-agent:          var(--cl-blue-main);   /* Azul — Agente */

  /* ── ESTADOS ─────────────────────────────────────────── */
  --cl-status-open:         #00E5A0;   /* Verde — conversación abierta */
  --cl-status-pending:      #F0B400;   /* Amarillo — esperando respuesta */
  --cl-status-resolved:     #6F7D96;   /* Gris — resuelta */
  --cl-status-error:        #FF4D6A;   /* Rojo — error/alerta */

  /* ── MÉTRICAS / KPI CARDS ────────────────────────────── */
  --cl-metric-positive:     #00E5A0;
  --cl-metric-negative:     #FF4D6A;
  --cl-metric-neutral:      var(--cl-text-muted);
}