/* =============================================
   DESIGN SYSTEM — proyectosweb.juanmazapata.site
   ============================================= */

:root {
  /* ─── FONDOS ─────────────────────────────── */
  --bg-primary:       #000000;
  --bg-secondary:     #04040d;
  --bg-tertiary:      #080818;
  --bg-card:          #0d0d1f;
  --bg-card-hover:    #111128;
  --bg-glass:         rgba(255, 255, 255, 0.03);
  --bg-glass-hover:   rgba(255, 255, 255, 0.06);
  --bg-overlay:       rgba(0, 0, 0, 0.85);

  /* ─── ACENTOS ────────────────────────────── */
  --accent-cyan:         #00E5FF;
  --accent-cyan-dim:     #00B8CC;
  --accent-cyan-glow:    rgba(0, 229, 255, 0.18);
  --accent-cyan-glow-lg: rgba(0, 229, 255, 0.08);
  --accent-violet:       #7C4DFF;
  --accent-violet-glow:  rgba(124, 77, 255, 0.18);
  --accent-pink:         #FF4081;

  /* Gradientes */
  --gradient-primary:    linear-gradient(135deg, #00E5FF 0%, #7C4DFF 100%);
  --gradient-text:       linear-gradient(135deg, #00E5FF 0%, #7C4DFF 60%, #FF4081 100%);
  --gradient-card:       linear-gradient(145deg, #0d0d1f 0%, #060614 100%);
  --gradient-hero:       radial-gradient(ellipse at 30% 50%, rgba(0,229,255,0.12) 0%, transparent 60%),
                         radial-gradient(ellipse at 70% 20%, rgba(124,77,255,0.10) 0%, transparent 50%),
                         #000000;
  --gradient-mesh-1:     rgba(0, 229, 255, 0.15);
  --gradient-mesh-2:     rgba(124, 77, 255, 0.12);
  --gradient-mesh-3:     rgba(255, 64, 129, 0.08);

  /* ─── TEXTOS ─────────────────────────────── */
  --text-primary:    rgba(255, 255, 255, 0.92);
  --text-secondary:  rgba(255, 255, 255, 0.62);
  --text-muted:      rgba(255, 255, 255, 0.38);
  --text-accent:     #00E5FF;

  /* ─── ESTADOS (BADGES) ───────────────────── */
  --status-dev:       #FFB300;
  --status-dev-bg:    rgba(255, 179, 0, 0.12);
  --status-beta:      #00E676;
  --status-beta-bg:   rgba(0, 230, 118, 0.12);
  --status-design:    #7C4DFF;
  --status-design-bg: rgba(124, 77, 255, 0.12);

  /* ─── BORDES ─────────────────────────────── */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-card:     rgba(255, 255, 255, 0.08);
  --border-accent:   rgba(0, 229, 255, 0.30);
  --border-hover:    rgba(0, 229, 255, 0.60);

  /* ─── TIPOGRAFÍAS ────────────────────────── */
  --font-display:  'Outfit', 'Raleway', sans-serif;
  --font-heading:  'Raleway', 'Outfit', sans-serif;
  --font-body:     'Inter', 'Raleway', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ─── ESPACIADO ──────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  --section-py:  clamp(64px, 10vw, 120px);
  --container:   1280px;
  --container-md: 960px;
  --container-sm: 720px;

  /* ─── RADIOS ─────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ─── SOMBRAS ────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:      0 4px 24px rgba(0,0,0,0.6);
  --shadow-lg:      0 8px 48px rgba(0,0,0,0.7);
  --shadow-glow:    0 0 40px rgba(0, 229, 255, 0.20);
  --shadow-glow-sm: 0 0 16px rgba(0, 229, 255, 0.15);
  --shadow-card:    0 4px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-card-hover: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,229,255,0.25), 0 0 40px rgba(0,229,255,0.08);

  /* ─── TRANSICIONES ───────────────────────── */
  --transition-fast:   all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX ────────────────────────────── */
  --z-base:     1;
  --z-above:    10;
  --z-navbar:   100;
  --z-modal:    200;
  --z-tooltip:  300;
}