/**
 * SECTOR: 00 - Estándar y Arquitectura Base
 * URL PLATAFORMA: /assets/css/nexo-variables.css
 * DESCRIPCIÓN: Fuente única de variables de color de STAFF Nexo 360.
 *              Documento maestro: 00_ESTANDAR_Y_ARQUITECTURA/PALETA_COLORES_STAFF_NEXO360.md
 *              Reemplaza la paleta Stitch anterior (#00f2ff, #b829ff, #0d1515).
 */

:root {
  /* Modo Claro (default) - Paleta STAFF Nexo 360 */
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --border-color: #e2e8f0;
  --border-color-strong: #cbd5e1;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --shadow: rgba(0, 0, 0, 0.08);

  /* Colores de acción y estado */
  --cyan: #00d4ff;
  --purple: #a855f7;
  --pink: #ec4899;
  --green: #10b981;
  --orange: #f59e0b;
  --red: #ef4444;

  /* Acentos secundarios / heredados */
  --cyan-700: #0369a1;
  --purple-700: #7c3aed;
  --purple-600: #8b5cf6;
  --purple-400: #c084fc;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --green-500: #22c55e;
  --green-400: #4ade80;
  --yellow-400: #fbbf24;
  --teal-400: #34d399;
  --red-400: #f87171;
  --rose-500: #f43f5e;
  --whatsapp: #25d366;

  /* Alias para compatibilidad con componentes existentes */
  --nexo-bg: var(--bg-primary);
  --nexo-surface: #ffffff;
  --nexo-primary: #0088a3; /* cyan más oscuro para contraste en claro */
  --nexo-primary-glow: rgba(0, 212, 255, 0.15);
  --nexo-secondary: var(--purple);
  --nexo-tertiary: var(--orange);
  --nexo-text: var(--text-primary);
  --nexo-text-muted: var(--text-muted);
  --nexo-border: var(--border-color);
  --nexo-border-glow: rgba(0, 212, 255, 0.25);
  --nexo-shadow: var(--shadow);
  --nexo-error: var(--red);
  --nexo-success: var(--green);
  --nexo-warning: var(--orange);

  /* Tokens semánticos para superficies/bordes transparentes y acentos (Sector 03 Home) */
  --glass-surface: rgba(0, 0, 0, 0.02);
  --glass-surface-strong: rgba(0, 0, 0, 0.04);
  --glass-surface-hover: rgba(0, 0, 0, 0.08);
  --glass-border: rgba(0, 0, 0, 0.05);
  --glass-border-subtle: rgba(0, 0, 0, 0.08);
  --glass-border-strong: rgba(0, 0, 0, 0.10);
  --accent-glow: rgba(0, 212, 255, 0.25);
}

[data-theme="dark"] {
  --bg-primary: #060913;
  --bg-secondary: #0b0f19;
  --bg-card: rgba(15, 23, 42, 0.55);
  --bg-card-hover: rgba(30, 41, 59, 0.7);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-strong: rgba(255, 255, 255, 0.15);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --shadow: rgba(0, 0, 0, 0.6);

  --nexo-bg: radial-gradient(circle at top left, rgba(0, 212, 255, 0.05), transparent 40%), radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.05), transparent 45%), linear-gradient(180deg, #060913 0%, #0a0e1a 50%, #05070d 100%);
  --nexo-surface: rgba(15, 23, 42, 0.5);
  --nexo-primary: var(--cyan);
  --nexo-primary-glow: rgba(0, 212, 255, 0.2);
  --nexo-secondary: var(--purple);
  --nexo-text: var(--text-primary);
  --nexo-text-muted: var(--text-muted);
  --nexo-border: var(--border-color);
  --nexo-border-glow: rgba(0, 212, 255, 0.25);
  --nexo-shadow: var(--shadow);

  /* Overrides semánticos para tema oscuro (Sector 03 Home & Shell) */
  --glass-surface: rgba(255, 255, 255, 0.02);
  --glass-surface-strong: rgba(255, 255, 255, 0.05);
  --glass-surface-hover: rgba(255, 255, 255, 0.08);
  --glass-border: var(--border-color);
  --glass-border-subtle: rgba(255, 255, 255, 0.06);
  --glass-border-strong: rgba(255, 255, 255, 0.12);
  --accent-glow: rgba(0, 212, 255, 0.35);
}

[data-theme="dark"],
[data-theme="dark"] body {
  background-color: #0a0e1a !important;
  background-image: var(--nexo-bg) !important;
  color: var(--nexo-text) !important;
}

[data-theme="light"],
[data-theme="light"] body {
  background-color: #f1f5f9 !important;
  background-image: none !important;
  color: #0f172a !important;
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --border-color: #cbd5e1;
  --border-color-strong: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --shadow: rgba(0, 0, 0, 0.08);
  --nexo-bg: #f1f5f9;
  --nexo-surface: #ffffff;
  --nexo-text: #0f172a;
  --nexo-text-muted: #475569;
  --nexo-border: #cbd5e1;
  --glass-surface: #ffffff;
  --glass-border: #cbd5e1;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .text-white,
[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-200 {
  color: #0f172a !important;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-500,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
  color: #334155 !important;
}

[data-theme="light"] .glass-card,
[data-theme="light"] .nexo-glass-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-slate-950,
[data-theme="light"] .bg-slate-900\/60,
[data-theme="light"] .bg-slate-900\/80,
[data-theme="light"] .bg-slate-900\/90,
[data-theme="light"] .bg-slate-950\/80,
[data-theme="light"] .bg-slate-950\/90 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20 {
  border-color: #cbd5e1 !important;
}

/* Tokens de login (modo oscuro siempre) */
:root {
  --login-bg-1: #060d17;
  --login-bg-2: #0b1220;
  --login-bg-3: #111827;
  --login-panel: rgba(12, 19, 34, 0.72);
  --login-card: rgba(15, 23, 42, 0.85);
  --login-border: rgba(255, 255, 255, 0.08);
  --login-input-bg: rgba(6, 13, 23, 0.6);
  --login-input-border: rgba(255, 255, 255, 0.12);
  --login-text-1: #f8fafc;
  --login-text-2: #94a3b8;
  --login-text-3: #64748b;
  --login-cyan: #00d4ff;
  --login-purple: #a855f7;
  --login-pink: #ec4899;
  --login-text-secondary: #9fb0c9;
  --login-text-aux: #92a4bf;
  --login-text-highlight: #d9f7ff;
  --login-success: #b6f4da;
  --login-error: #fecaca;
}

/* Tokens de landing/lobby */
:root {
  --lobby-bg: #07111f;
  --lobby-gradient-1: #08111f;
  --lobby-gradient-2: #09121f;
  --lobby-gradient-3: #050b14;
  --lobby-card: rgba(16, 24, 42, 0.76);
  --lobby-border: rgba(255, 255, 255, 0.1);
  --lobby-text: #eef4ff;
  --lobby-text-secondary: #9db0cb;
  --lobby-cyan: #00d4ff;
  --lobby-purple: #8b5cf6;
  --lobby-purple-light: #c084fc;
}