:root {
    /* Paleta base */
    --color-negro: #0A0A0A;
    --color-blanco: #FFFFFF;
    --color-crema: #F4F1EA;
    --color-oro: #D4AF37;
    --color-oro-oscuro: #B8941F;
    --color-gris-oscuro: #1A1A1A;
    --color-gris-medio: #666666;
    --color-gris-claro: #CCCCCC;

    /* Tema Oscuro (Default) */
    --bg-primary: var(--color-negro);
    --bg-secondary: #121212;
    --bg-surface: var(--color-gris-oscuro);
    --text-primary: var(--color-crema);
    --text-secondary: var(--color-gris-claro);
    --accent: var(--color-oro);
    --accent-hover: var(--color-oro-oscuro);
    --border-color: rgba(255, 255, 255, 0.1);
    --navbar-bg: rgba(10, 10, 10, 0.95);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Tipografía */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Espaciados */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 80px;
    --spacing-xxl: 120px;

    /* Tamaños de fuente */
    --text-xs: 14px;
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 24px;
    --text-xl: 32px;
    --text-xxl: 48px;
    --text-xxxl: 64px;

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index */
    --z-nav: 100;
    --z-modal: 1000;
}

/* Tema Claro */
html.light-mode {
    --bg-primary: var(--color-crema);
    --bg-secondary: var(--color-blanco);
    --bg-surface: var(--color-blanco);
    --text-primary: var(--color-negro);
    --text-secondary: var(--color-gris-medio);
    --accent: var(--color-oro-oscuro);
    --accent-hover: var(--color-oro);
    --border-color: rgba(0, 0, 0, 0.1);
    --navbar-bg: rgba(244, 241, 234, 0.95);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}