/* =============================================
   DESIGN SYSTEM: juanmazapata.site v3.0
   Creativo Digital: Diseño Web & Software a Medida
   ============================================= */

:root {
  /* ─── FONDOS ─────────────────────────────── */
  /* ─── FONDOS (Negro Carbón Obsidiana / Grafito Profundo) ─── */
  --bg-primary:       #0e0e10; /* Negro carbón obsidiana, puro y elegante */
  --bg-secondary:     #141417; /* Superficie secundaria refinada */
  --bg-tertiary:      #1a1a20; /* Contenedores y badges */
  --bg-surface:       #18181d; /* Tarjetas, pilares y cajas elevadas */
  --bg-elevated:      #22222a; /* Hover / modales / estados activos */
  --bg-card:          rgba(255, 255, 255, 0.028);
  --bg-card-hover:    rgba(255, 255, 255, 0.055);
  --bg-glass:         rgba(24, 24, 29, 0.75);
  --bg-glass-strong:  rgba(14, 14, 16, 0.90);
  --bg-overlay:       rgba(14, 14, 16, 0.95);
  --bg-glass-hover:   rgba(255, 255, 255, 0.08);
  --status-beta:      #10B981;
  --status-beta-bg:   rgba(16, 185, 129, 0.10);
  --status-design:    #8B5CF6;
  --status-design-bg: rgba(139, 92, 246, 0.10);
  --gradient-mesh-1:  rgba(232, 93, 48, 0.08);
  --gradient-mesh-2:  rgba(232, 93, 48, 0.05);
  --gradient-mesh-3:  rgba(232, 93, 48, 0.03);

  /* ─── ACENTO VERMILLION / CORAL ──────────── */
  --accent:              #E85D30;
  --accent-dim:          #C24A22;
  --accent-light:        #FF7A4D;
  --accent-glow:         rgba(232, 93, 48, 0.18);
  --accent-glow-subtle:  rgba(232, 93, 48, 0.08);


  /* Gradientes refinados (monocromáticos y sutiles) */
  --gradient-primary:    linear-gradient(135deg, #E85D30 0%, #FF7A4D 100%);
  --gradient-text:       linear-gradient(135deg, #FFFFFF 30%, #E85D30 100%);
  --gradient-card:       linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.005) 100%);
  --gradient-hero:       radial-gradient(ellipse at 50% 0%, rgba(232,93,48,0.07) 0%, transparent 65%), #0e0e10;

  /* ─── GLASS ──────────────────────────────── */
  --glass-bg:            rgba(24, 24, 29, 0.65);
  --glass-border:        rgba(255, 255, 255, 0.08);
  --glass-blur:          blur(16px);
  --glass-blur-sm:       blur(10px);

  /* ─── TEXTOS ─────────────────────────────── */
  --text-primary:    #F2F0ED; /* Blanco cálido editorial */
  --text-secondary:  #90909A; /* Gris grafito medio equilibrado */
  --text-muted:      #8A8A96; /* Gris neutro tenue */
  --text-accent:     #E85D30;

  /* ─── ESTADOS ────────────────────────────── */
  --status-dev:       #F59E0B;
  --status-dev-bg:    rgba(245, 158, 11, 0.10);
  --status-live:      #10B981;
  --status-live-bg:   rgba(16, 185, 129, 0.10);

  /* ─── BORDES ─────────────────────────────── */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-card:     rgba(255, 255, 255, 0.08);
  --border-accent:   rgba(232, 93, 48, 0.35);
  --border-hover:    rgba(232, 93, 48, 0.65);

  /* ─── TIPOGRAFÍAS ────────────────────────── */
  --font-display:  'Syne', sans-serif;
  --font-heading:  'Syne', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 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(80px, 11vw, 140px);
  --container:    1280px;
  --container-md: 960px;
  --container-sm: 720px;

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

  /* ─── SOMBRAS (Sutiles y cinematográficas, no neón) ─── */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:         0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:         0 16px 50px rgba(0,0,0,0.65);
  --shadow-glow:       0 0 30px rgba(232, 93, 48, 0.15);
  --shadow-glow-sm:    0 0 16px rgba(232, 93, 48, 0.10);
  --shadow-card:       0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-card-hover: 0 16px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(232,93,48,0.3);

  /* ─── TRANSICIONES ───────────────────────── */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Z-INDEX ────────────────────────────── */
  --z-negative: -1;
  --z-base:      1;
  --z-navbar:    100;
  --z-drawer:    200;
  --z-modal:     300;
  --z-cursor:    9999;
}