@charset "UTF-8";
/*
   SKYNIX - DESIGN TOKENS
   ======================
   Sistema de diseño unificado. Variables globales.
   NO OVERRIDEAR en templates — usar exclusivamente estas.
*/

:root {
  /* 🎨 Colores base - Tema oscuro premium */
  --sk-bg:          #0f0f0f;
  --sk-bg-darker:   #0a0a0a;
  --sk-surface:     #1a1a1a;
  --sk-surface-2:   #222222;
  --sk-surface-3:   #2a2a2a;
  --sk-surface-4:   #333333;
  --sk-border:      #2a2a2a;
  --sk-border-2:    #3a3a3a;

  /* 📝 Texto */
  --sk-text:        #f0f0f0;
  --sk-text-2:      #a0a0a0;
  --sk-text-3:      #606060;
  --sk-text-4:      #454545;

  /* 💛 Primario - Dorado SkyniX */
  --sk-primary:        #f5c518;
  --sk-primary-hover:  #e6b800;
  --sk-primary-light:  rgba(245, 197, 24, 0.15);
  --sk-primary-glow:   rgba(245, 197, 24, 0.3);
  --sk-primary-text:   #1a1a1a;

  /* ✅ Estado */
  --sk-success:       #22c55e;
  --sk-success-light: rgba(34, 197, 94, 0.12);
  --sk-warning:       #f59e0b;
  --sk-warning-light: rgba(245, 158, 11, 0.12);
  --sk-danger:        #ef4444;
  --sk-danger-light:  rgba(239, 68, 68, 0.12);
  --sk-info:          #3b82f6;
  --sk-info-light:    rgba(59, 130, 246, 0.12);
  --sk-purple:        #a78bfa;
  --sk-purple-light:  rgba(167, 139, 250, 0.12);
  --sk-purple-border: rgba(167, 139, 250, 0.2);
  --sk-teal:          #14b8a6;
  --sk-teal-light:    rgba(20, 184, 166, 0.12);
  --sk-teal-border:   rgba(20, 184, 166, 0.2);

  /* 📐 Radios */
  --sk-radius-xs:  4px;
  --sk-radius-sm:  6px;
  --sk-radius:     8px;
  --sk-radius-md:  10px;
  --sk-radius-lg:  12px;
  --sk-radius-xl:  16px;
  --sk-radius-full: 9999px;

  /* 🌓 Sombras */
  --sk-shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --sk-shadow:      0 1px 3px rgba(0,0,0,0.4);
  --sk-shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --sk-shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --sk-shadow-xl:   0 12px 40px rgba(0,0,0,0.6);
  --sk-glow-primary: 0 0 16px var(--sk-primary-glow);

  /* 🔤 Tipografía */
  --sk-font:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sk-font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --sk-text-xs:    11px;
  --sk-text-sm:    12px;
  --sk-text-base:  13px;
  --sk-text-md:    14px;
  --sk-text-lg:    16px;
  --sk-text-xl:    20px;
  --sk-text-2xl:   24px;
  --sk-text-3xl:   32px;

  /* 📏 Espaciado (8px base) */
  --sk-space-1:  4px;
  --sk-space-2:  8px;
  --sk-space-3:  12px;
  --sk-space-4:  16px;
  --sk-space-5:  20px;
  --sk-space-6:  24px;
  --sk-space-8:  32px;
  --sk-space-10: 40px;
  --sk-space-12: 48px;

  /* ⏳ Transiciones */
  --sk-transition:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sk-transition-md: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}