/* Variables CSS - Paleta de colores y tipografía */
:root {
    /* Colores principales */
    --color-primary: #111111;
    --color-secondary: #666666;
    --color-light: #f8f8f8;
    
    /* Paleta de fondos por sección */
    --bg-hero: #ffffff;
    --bg-what: #f9f7f5;
    --bg-method: #f5f9fa;
    --bg-projects: #faf5f9;
    --bg-contact: #f7f9f5;
    
    /* Colores de acento */
    --accent-1: #ff6b6b;
    --accent-2: #4ecdc4;
    --accent-3: #45b7d1;
    
    /* Tipografía */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
    --font-mono: 'Space Mono', monospace;
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.6s ease;
    
    /* Espaciados */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Sombras */
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    /* Bordes */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
}