/* ============================================
   VARIABLES CSS - Sistema de Diseño
   ============================================ */

:root {
    /* Colores principales */
    --color-bg-dark: #0a0a0a;
    --color-bg-card: #141414;
    --color-bg-card-hover: #1a1a1a;
    --color-bg-input: #1a1a1a;
    
    /* Colores dorados/ámbar */
    --color-gold: #d4a853;
    --color-gold-light: #e8c97a;
    --color-gold-dark: #b8923f;
    --color-gold-gradient: linear-gradient(135deg, #e8c97a 0%, #d4a853 50%, #b8923f 100%);
    
    /* Colores de texto */
    --color-text-primary: #f5f0e8;
    --color-text-secondary: #a8a39a;
    --color-text-muted: #6b675f;
    
    /* Colores de borde */
    --color-border: rgba(212, 168, 83, 0.15);
    --color-border-focus: rgba(212, 168, 83, 0.4);
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 4px 20px rgba(212, 168, 83, 0.25);
    
    /* Tipografía */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Edu QLD Hand', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Bordes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Z-index */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;
}