/*
 * Variables CSS - VivaElMundial Theme
 * Colores, tipografía y valores reutilizables
 */

:root {
    /* Colores principales */
    --color-dark-primary: #0a101f;
    --color-dark-secondary: #121a2e;
    --color-dark-tertiary: #1a243d;

    /* Colores de acento */
    --color-accent-gold: #fca311;
    --color-accent-blue: #3a86ff;
    --color-accent-red: #ff6b6b;

    /* Colores de texto */
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-white: #ffffff;

    /* Tipografía */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Tamaños de fuente */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */

    /* Espaciado */
    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 0.75rem;
    /* 12px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */
    --spacing-3xl: 4rem;
    /* 64px */

    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 50px;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Contenedor */
    --container-width: 1200px;
    --container-padding: 20px;

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;
}

/* Variables específicas para modo oscuro */
body.vivaelmundial-dark-theme {
    --wp-admin-theme-color: #fca311;
    --wp-admin-theme-color-darker-10: #e39310;
    --wp-admin-theme-color-darker-20: #ca830e;
}