:root {
    /* Colores */
    --primary-color: #021430;
    --secondary-color: #112240;
    --accent-color: #61DAFB;
    --accent-color-hover: #00A8E8;
    --text-primary: #FFFFFF;
    --text-secondary: #8892B0;
    --text-tertiary: #7F8C8D;
    --background-light: #F0F0F0;
    --background-dark: #021430;
    --border-color: rgba(255, 255, 255, 0.1);
    --error-color: #FF6B6B;
    --success-color: #4CAF50;

    /* Tipografía */
    --font-family: 'Inter', sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;
    --font-size-4xl: 64px;
    --font-size-5xl: 80px;
    --font-size-6xl: 96px;

    /* Espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;
    --spacing-5xl: 6rem;

    /* Transiciones */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.25);

    /* Bordes */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;
}