/* ═══════════════════════════════════════════════════════════════════
   LS DOMÓTICA — variables.css
   ------------------------------------------------------------------
   Tokens de diseño globales (colores, tipografía, radios, sombras).
   Todas las variables viven en :root para que cualquier sección
   pueda consumirlas con var(--nombre).
   Cambiando acá se re-theme todo el sitio sin tocar CSS de secciones.
═══════════════════════════════════════════════════════════════════ */

:root {

  /* ─── PALETA (dark-premium, basada en el nuevo diseño) ───────── */
  --bg:       #07090f;  /* fondo base de toda la app                 */
  --bg2:      #0c0f1a;  /* fondo secundario (cards, paneles)         */
  --bg3:      #111520;  /* fondo elevado (inputs, hovers)            */

  --card:     rgba(255, 255, 255, 0.04);   /* superficies semi-transp. */
  --border:   rgba(255, 255, 255, 0.08);   /* bordes suaves            */

  --accent:   #0095ff;  /* azul principal de marca                   */
  --accent2:  #00d4ff;  /* cian de acento (gradientes, highlights)   */

  --grad:     linear-gradient(135deg, #0095ff 0%, #00d4ff 100%);
  --grad-rev: linear-gradient(135deg, #00d4ff 0%, #0095ff 100%);

  --text:     #eef2ff;                     /* texto principal          */
  --muted:    rgba(220, 228, 255, 0.52);   /* texto secundario / hints */

  --success:  #22c55e;
  --danger:   #ef4444;
  --warning:  #f59e0b;

  /* ─── RADIOS ──────────────────────────────────────────────────── */
  --radius:    16px;  /* cards, secciones grandes      */
  --radius-sm: 10px;  /* inputs, botones, badges chicas */
  --radius-lg: 24px;  /* modales, overlays             */

  /* ─── SOMBRAS ─────────────────────────────────────────────────── */
  --shadow:        0 24px 80px rgba(0, 149, 255, 0.15);
  --shadow-soft:   0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-accent: 0 8px 36px rgba(0, 149, 255, 0.55);

  /* ─── TIPOGRAFÍA ──────────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ─── LAYOUT ──────────────────────────────────────────────────── */
  --container-max: 1180px;  /* ancho máximo del contenido            */
  --section-pad:   96px;    /* padding vertical por defecto          */
  --nav-height:    66px;    /* alto de la barra de navegación fija   */

  /* ─── Z-INDEX ─────────────────────────────────────────────────── */
  --z-nav:    1000;
  --z-modal:  2000;
  --z-portal: 2500;
  --z-toast:  3000;

  /* ─── TRANSICIONES ────────────────────────────────────────────── */
  --t-fast:   .18s ease;
  --t-normal: .28s cubic-bezier(.4, 0, .2, 1);
  --t-slow:   .5s  cubic-bezier(.4, 0, .2, 1);
}