/**
 * CSS Variables - Sistema de Diseño DigiHub
 * 
 * @package DigiHub
 */

:root {
  /* ── COLORES DE MARCA ──────────────────────────── */
  --primary:          #2563eb;
  --primary-dark:     #1d4ed8;
  --primary-light:    #60a5fa;
  --secondary:        #0f172a;
  --accent:           #10b981;
  --accent-hover:     #059669;
  --muted:            #64748b;

  /* ── FONDOS ────────────────────────────────────── */
  --bg-primary:       #ffffff;
  --bg-alt:           #f8fafc;
  --bg-dark:          #0f172a;
  --bg-darker:        #020617;

  /* ── TEXTO ─────────────────────────────────────── */
  --text-primary:     #0f172a;
  --text-secondary:   #334155;
  --text-muted:       #64748b;
  --text-white:       #ffffff;

  /* ── GLASSMORPHISM ─────────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.7);
  --glass-border:     rgba(37, 99, 235, 0.1);
  --glass-blur:       blur(12px);

  /* ── GRADIENTES ────────────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-hero:     radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.1) 0%, transparent 50%), 
                       radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
  --gradient-text:     linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-animated: linear-gradient(-45deg, #2563eb, #7c3aed, #10b981, #3b82f6);

  /* ── SOMBRAS ───────────────────────────────────── */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md:        0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-glow:      0 0 30px rgba(37, 99, 235, 0.25);
  --shadow-glow-sm:   0 0 16px rgba(37, 99, 235, 0.20);
  --shadow-xl:        0 32px 64px rgba(0, 0, 0, 0.16);
  --shadow-card:      0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:0 20px 40px rgba(37, 99, 235, 0.12);

  /* ── TIPOGRAFÍA FLUIDA ─────────────────────────── */
  --font-primary:     'Inter', system-ui, -apple-system, sans-serif;
  --font-secondary:   'Plus Jakarta Sans', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  --text-xs:    clamp(0.70rem, 0.65rem + 0.25vw, 0.80rem);
  --text-sm:    clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem);
  --text-base:  clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --text-lg:    clamp(1.10rem, 1.00rem + 0.50vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.10rem + 0.75vw, 1.50rem);
  --text-2xl:   clamp(1.50rem, 1.30rem + 1.00vw, 2.00rem);
  --text-3xl:   clamp(2.00rem, 1.70rem + 1.50vw, 2.75rem);
  --text-4xl:   clamp(2.50rem, 2.00rem + 2.50vw, 3.50rem);
  --text-hero:  clamp(3.00rem, 2.50rem + 5.00vw, 5.00rem);

  /* ── ESPACIADO ─────────────────────────────────── */
  --space-xs:      0.25rem;
  --space-sm:      0.50rem;
  --space-md:      1.00rem;
  --space-lg:      1.50rem;
  --space-xl:      2.00rem;
  --space-2xl:     3.00rem;
  --space-3xl:     4.00rem;
  --space-4xl:     6.00rem;
  --space-5xl:     8.00rem;
  --space-6xl:     10.00rem;
  --space-section: clamp(4rem, 8vw, 8rem);

  /* ── BORDES ────────────────────────────────────── */
  --radius-sm:   0.50rem;
  --radius-md:   1.00rem;
  --radius-lg:   1.50rem;
  --radius-xl:   2.00rem;
  --radius-2xl:  3.00rem;
  --radius-full: 9999px;

  /* ── TRANSICIONES ──────────────────────────────── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --dur-fast:    0.15s;
  --dur-normal:  0.30s;
  --dur-slow:    0.50s;

  /* ── Z-INDEX ───────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    500;
  --z-tooltip:  600;
}

/* Dark mode variables */
[data-theme="dark"] {
  --bg-primary:       #0f172a;
  --bg-alt:           #1e293b;
  --text-primary:     #f1f5f9;
  --text-secondary:   #cbd5e1;
  --text-muted:       #94a3b8;
  --glass-bg:         rgba(15,23,42,0.85);
  --glass-border:     rgba(255,255,255,0.08);
  --shadow-card:      0 4px 20px rgba(0,0,0,0.3);
  --shadow-card-hover:0 12px 40px rgba(37,99,235,0.25);
}