/* ============================================================
   variables.css — Sistema de diseño global
   Tema: Dark futuristic / Tech elegante
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Colores base del admin (dark) ── */
  --admin-bg:           #0a0a0f;
  --admin-surface:      #111118;
  --admin-surface-2:    #1a1a24;
  --admin-surface-3:    #22222f;
  --admin-border:       rgba(255,255,255,0.07);
  --admin-border-hover: rgba(255,255,255,0.15);

  /* ── Acento principal ── */
  --accent:             #ff6b35;
  --accent-light:       #ff8c5a;
  --accent-dim:         rgba(255,107,53,0.15);
  --accent-glow:        0 0 20px rgba(255,107,53,0.4);

  /* ── Texto ── */
  --text-primary:   #f0f0f5;
  --text-secondary: #8888a8;
  --text-muted:     #55556a;
  --text-inverse:   #0a0a0f;

  /* ── Status colors ── */
  --success:      #22c55e;
  --success-dim:  rgba(34,197,94,0.12);
  --warning:      #f59e0b;
  --warning-dim:  rgba(245,158,11,0.12);
  --danger:       #ef4444;
  --danger-dim:   rgba(239,68,68,0.12);
  --info:         #3b82f6;
  --info-dim:     rgba(59,130,246,0.12);

  /* ── Tipografía ── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Espaciado ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Transiciones ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.7);

  /* ── Sidebar ── */
  --sidebar-width:          240px;
  --sidebar-collapsed-width: 68px;
  --topbar-height:          64px;
}