/**
 * ═══════════════════════════════════════════════
 *  REVOLUCIÓN URBANA — DESIGN TOKENS
 *  Sistema de diseño: variables CSS globales
 * ═══════════════════════════════════════════════
 */

:root {
	/* ─── COLORES PRIMARIOS ─── */
	--ru-black:       #0A0A0A;
	--ru-yellow:      #FFD600;
	--ru-yellow-dark: #E6C200;
	--ru-yellow-hover:#FFF176;
	--ru-white:       #FAFAFA;

	/* ─── ESCALA DE GRISES ─── */
	--ru-gray-950:    #0D0D0D;
	--ru-gray-900:    #1A1A1A;
	--ru-gray-800:    #262626;
	--ru-gray-700:    #333333;
	--ru-gray-600:    #4D4D4D;
	--ru-gray-500:    #666666;
	--ru-gray-400:    #999999;
	--ru-gray-300:    #D4D4D4;
	--ru-gray-200:    #E5E5E5;
	--ru-gray-100:    #F0F0F0;

	/* ─── COLORES SEMÁNTICOS ─── */
	--ru-success:     #22C55E;
	--ru-error:       #EF4444;
	--ru-warning:     #F59E0B;

	/* ─── TIPOGRAFÍA ─── */
	--ru-font-heading: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
	--ru-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--ru-text-xs:     0.75rem;    /* 12px */
	--ru-text-sm:     0.875rem;   /* 14px */
	--ru-text-base:   1rem;       /* 16px */
	--ru-text-lg:     1.125rem;   /* 18px */
	--ru-text-xl:     1.25rem;    /* 20px */
	--ru-text-2xl:    1.5rem;     /* 24px */
	--ru-text-3xl:    1.875rem;   /* 30px */
	--ru-text-4xl:    2.25rem;    /* 36px */
	--ru-text-5xl:    3rem;       /* 48px */
	--ru-text-6xl:    3.75rem;    /* 60px */
	--ru-text-7xl:    4.5rem;     /* 72px */
	--ru-text-8xl:    6rem;       /* 96px */

	--ru-leading-tight:   1.1;
	--ru-leading-snug:    1.25;
	--ru-leading-normal:  1.5;
	--ru-leading-relaxed: 1.625;

	--ru-tracking-tight:  -0.025em;
	--ru-tracking-normal: 0;
	--ru-tracking-wide:   0.05em;
	--ru-tracking-wider:  0.1em;

	/* ─── ESPACIADO (sistema 8px) ─── */
	--ru-space-1:     0.5rem;   /* 8px */
	--ru-space-2:     1rem;     /* 16px */
	--ru-space-3:     1.5rem;   /* 24px */
	--ru-space-4:     2rem;     /* 32px */
	--ru-space-5:     2.5rem;   /* 40px */
	--ru-space-6:     3rem;     /* 48px */
	--ru-space-7:     3.5rem;   /* 56px */
	--ru-space-8:     4rem;     /* 64px */
	--ru-space-10:    5rem;     /* 80px */
	--ru-space-12:    6rem;     /* 96px */
	--ru-space-16:    8rem;     /* 128px */

	/* ─── LAYOUT ─── */
	--ru-container-sm:    640px;
	--ru-container-md:    768px;
	--ru-container-lg:    1024px;
	--ru-container-xl:    1200px;
	--ru-container-2xl:   1440px;

	/* ─── BORDES ─── */
	--ru-radius-none:     0;
	--ru-radius-sm:       2px;
	--ru-radius-md:       4px;
	--ru-radius-full:     9999px;
	--ru-border-width:    1px;

	/* ─── SOMBRAS ─── */
	--ru-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.2);
	--ru-shadow-md:       0 4px 6px rgba(0, 0, 0, 0.3);
	--ru-shadow-lg:       0 10px 15px rgba(0, 0, 0, 0.4);
	--ru-shadow-xl:       0 20px 25px rgba(0, 0, 0, 0.5);
	--ru-shadow-2xl:      0 25px 50px rgba(0, 0, 0, 0.6);
	--ru-shadow-glow:     0 0 20px rgba(255, 214, 0, 0.3);
	--ru-shadow-glow-lg:  0 0 40px rgba(255, 214, 0, 0.4), 0 0 80px rgba(255, 214, 0, 0.15);
	--ru-shadow-glow-sm:  0 0 10px rgba(255, 214, 0, 0.2);
	--ru-shadow-card:     0 8px 32px rgba(0, 0, 0, 0.35);
	--ru-shadow-float:    0 16px 48px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);

	/* ─── GRADIENTES ─── */
	--ru-gradient-hero:   linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 40%, #0A0A0A 100%);
	--ru-gradient-yellow: linear-gradient(135deg, #FFD600 0%, #FFC107 50%, #FFAB00 100%);
	--ru-gradient-dark:   linear-gradient(180deg, #0D0D0D 0%, #1A1A1A 100%);
	--ru-gradient-card:   linear-gradient(145deg, rgba(26,26,26,0.9) 0%, rgba(13,13,13,0.95) 100%);
	--ru-gradient-shine:  linear-gradient(110deg, transparent 25%, rgba(255,214,0,0.08) 50%, transparent 75%);
	--ru-gradient-text:   linear-gradient(135deg, #FFD600 0%, #FFF176 50%, #FFD600 100%);
	--ru-gradient-overlay: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.4) 40%, rgba(10,10,10,0.85) 100%);
	--ru-gradient-radial: radial-gradient(ellipse at center, rgba(255,214,0,0.12) 0%, transparent 70%);

	/* ─── GLASSMORPHISM ─── */
	--ru-glass-bg:        rgba(26, 26, 26, 0.7);
	--ru-glass-border:    rgba(255, 255, 255, 0.08);
	--ru-glass-blur:      blur(16px);
	--ru-glass-blur-lg:   blur(24px);

	/* ─── TRANSICIONES ─── */
	--ru-ease:            cubic-bezier(0.4, 0, 0.2, 1);
	--ru-ease-in:         cubic-bezier(0.4, 0, 1, 1);
	--ru-ease-out:        cubic-bezier(0, 0, 0.2, 1);
	--ru-ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
	--ru-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--ru-ease-smooth:     cubic-bezier(0.23, 1, 0.32, 1);
	--ru-duration-fast:   150ms;
	--ru-duration-base:   300ms;
	--ru-duration-slow:   500ms;
	--ru-duration-slower: 800ms;

	/* ─── Z-INDEX ─── */
	--ru-z-dropdown:      10;
	--ru-z-sticky:        20;
	--ru-z-header:        100;
	--ru-z-overlay:       200;
	--ru-z-drawer:        300;
	--ru-z-modal:         400;
	--ru-z-announcement:  500;
	--ru-z-toast:         600;
}