/* ==========================================================================
   FEUNIVERSAL - DESIGN TOKENS & CRYSTAL GLASSMORPHISM THEME ENGINE
   Modo Nocturno (Obsidiana & Zafiro Cósmico) & Modo Diurno (Alabastro Opalino)
   ========================================================================== */

:root {
  /* Tipografías */
    --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-sacred: 'Cinzel', serif, Georgia;
  --font-mono: 'JetBrains Mono', monospace;
  --font-urdu: 'Noto Nastaliq Urdu', 'Scheherazade New', 'Amiri', serif;
  --font-bengali: 'Noto Sans Bengali', system-ui, sans-serif;
  --font-japanese: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-arabic: 'Amiri', 'Scheherazade New', 'Noto Sans Arabic', serif;

  /* Transiciones y Curvas */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease-smooth);
  --transition-normal: 0.3s var(--ease-smooth);
  --transition-slow: 0.5s var(--ease-smooth);

  /* Radios de borde */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Safe Area Insets para Notch de iPhone, Dynamic Island y Barra de Gestos Android/iOS */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ==========================================================================
   TEMA NOCTURNO (DEFAULT) - Inspirado en HUD Cyber-Espiritual de alta gama
   ========================================================================== */
[data-theme="dark"], :root:not([data-theme="light"]) {
  --color-scheme: dark;
  
  /* Fondos principales */
  --bg-app: #080911;
  --bg-gradient: radial-gradient(circle at 50% 0%, #16182e 0%, #0d0e18 50%, #06070b 100%);
  --bg-mesh-1: rgba(99, 102, 241, 0.08);
  --bg-mesh-2: rgba(244, 63, 94, 0.06);
  --bg-mesh-3: rgba(245, 158, 11, 0.05);

  /* Superficies de Cristal */
  --glass-surface-1: rgba(19, 21, 36, 0.68);
  --glass-surface-2: rgba(26, 29, 50, 0.78);
  --glass-surface-3: rgba(35, 39, 66, 0.88);
  --glass-surface-modal: rgba(18, 20, 36, 0.96);
  --glass-surface-hover: rgba(35, 39, 66, 0.88);
  --glass-surface-active: rgba(43, 48, 82, 0.98);
  --glass-inset: rgba(10, 11, 22, 0.65);
  --modal-backdrop: rgba(3, 7, 18, 0.82);

  /* Bordes de Luz y Reflejos */
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-highlight: rgba(255, 255, 255, 0.18);
  --glass-border-glow: rgba(129, 140, 248, 0.35);

  /* Sombras y Luces especulares */
  --glass-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --glass-shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --glass-shadow-lg: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.15);
  --glass-shadow-crystal: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  /* Textos */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #090a10;

  /* Acentos de Color (Paleta HUD Místico) */
  --accent-gold: #f59e0b;
  --accent-gold-glow: rgba(245, 158, 11, 0.35);
  --accent-rose: #f43f5e;
  --accent-rose-glow: rgba(244, 63, 94, 0.35);
  --accent-cyan: #06b6d4;
  --accent-cyan-glow: rgba(6, 182, 212, 0.35);
  --accent-emerald: #10b981;
  --accent-emerald-glow: rgba(16, 185, 129, 0.35);
  --accent-indigo: #6366f1;
  --accent-indigo-glow: rgba(99, 102, 241, 0.35);
  --accent-purple: #a855f7;
  --accent-purple-glow: rgba(168, 85, 247, 0.35);
  --accent-amber: #fbbf24;

  /* Barras de Estado / HUD */
  --hud-high-risk: #f43f5e;
  --hud-med-risk: #f97316;
  --hud-low-risk: #facc15;
  --hud-safe: #10b981;

  --slider-track: rgba(255, 255, 255, 0.12);
  --slider-thumb: #ffffff;
}

/* ==========================================================================
   TEMA DIURNO (ALABASTRO & CRISTAL OPALINO)
   ========================================================================== */
[data-theme="light"] {
  --color-scheme: light;

  /* Fondos principales */
  --bg-app: #f5f7fc;
  --bg-gradient: radial-gradient(circle at 50% 0%, #ffffff 0%, #edf2fa 60%, #e2e8f2 100%);
  --bg-mesh-1: rgba(99, 102, 241, 0.06);
  --bg-mesh-2: rgba(245, 158, 11, 0.08);
  --bg-mesh-3: rgba(16, 185, 129, 0.05);

  /* Superficies de Cristal Opalino */
  --glass-surface-1: rgba(255, 255, 255, 0.75);
  --glass-surface-2: rgba(255, 255, 255, 0.9);
  --glass-surface-3: rgba(241, 245, 249, 0.95);
  --glass-surface-modal: rgba(255, 255, 255, 0.98);
  --glass-surface-hover: rgba(255, 255, 255, 0.98);
  --glass-surface-active: #ffffff;
  --glass-inset: rgba(226, 232, 240, 0.6);
  --modal-backdrop: rgba(15, 23, 42, 0.65);

  /* Bordes de Luz y Reflejos */
  --glass-border: rgba(148, 163, 184, 0.38);
  --glass-border-highlight: rgba(100, 116, 139, 0.45);
  --glass-border-glow: rgba(217, 119, 6, 0.25);

  /* Sombras Diurnas Pulidas */
  --glass-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
  --glass-shadow-md: 0 8px 20px -3px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(15, 23, 42, 0.05);
  --glass-shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, 0.14), 0 0 20px rgba(245, 158, 11, 0.1);

  --glass-shadow-crystal: 0 8px 30px 0 rgba(30, 41, 59, 0.07), inset 0 1px 0 0 rgba(255, 255, 255, 0.95);

  /* Textos */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #f8fafc;

  /* Acentos de Color Diurnos */
  --accent-gold: #d97706;
  --accent-gold-glow: rgba(217, 119, 6, 0.22);
  --accent-rose: #e11d48;
  --accent-rose-glow: rgba(225, 29, 72, 0.2);
  --accent-cyan: #0891b2;
  --accent-cyan-glow: rgba(8, 145, 178, 0.2);
  --accent-emerald: #059669;
  --accent-emerald-glow: rgba(5, 150, 105, 0.2);
  --accent-indigo: #4f46e5;
  --accent-indigo-glow: rgba(79, 70, 229, 0.22);
  --accent-purple: #9333ea;
  --accent-purple-glow: rgba(147, 51, 234, 0.22);
  --accent-amber: #d97706;

  /* Barras de Estado / HUD */
  --hud-high-risk: #e11d48;
  --hud-med-risk: #ea580c;
  --hud-low-risk: #ca8a04;
  --hud-safe: #059669;

  --slider-track: rgba(15, 23, 42, 0.12);
  --slider-thumb: #ffffff;
}