/* Day of the Dead Design System */
:root {
    /* Primary Colors */
    --color-magenta: #FF006E;
    --color-orange: #FF6B35;
    --color-yellow: #FFC857;

    /* Secondary Colors */
    --color-purple: #8338EC;
    --color-turquoise: #06FFA5;

    /* Neutrals */
    --color-bg-dark: #0D0D0D;
    --color-surface-dark: #1A1A1A;
    --color-text-light: #F5F5F5;
    --color-text-muted: #A0A0A0;

    /* Accent variations */
    --color-accent-magenta: var(--color-magenta);
    --color-accent-orange: var(--color-orange);

    /* Gradients */
    --gradient-skull: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 50%, var(--color-orange) 100%);
    --gradient-background: radial-gradient(circle at top center, #1a0b2e 0%, var(--color-bg-dark) 60%);
    --gradient-text: linear-gradient(90deg, var(--color-magenta), var(--color-orange), var(--color-yellow));

    /* Typography */
    --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Caveat', cursive;

    /* Type Scale */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1.125rem;
    /* 18px */
    --text-lg: 1.5rem;
    /* 24px */
    --text-xl: 2rem;
    /* 32px */
    --text-2xl: 3rem;
    /* 48px */
    --text-3xl: 4rem;
    /* 64px */
    --text-4xl: 5rem;
    /* 80px */

    /* Spacing Scale (4px base) */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.5rem;
    /* 24px */
    --space-6: 2rem;
    /* 32px */
    --space-8: 3rem;
    /* 48px */
    --space-10: 4rem;
    /* 64px */
    --space-12: 6rem;
    /* 96px */
    --space-16: 8rem;
    /* 128px */

    /* Border Radius */
    --radius-sm: 0.5rem;
    /* 8px */
    --radius-md: 1rem;
    /* 16px */
    --radius-lg: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Animation Timings */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 1000ms;

    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow-magenta: 0 0 20px rgba(255, 0, 110, 0.4);
    --shadow-glow-orange: 0 0 20px rgba(255, 107, 53, 0.4);
    --shadow-glow-purple: 0 0 20px rgba(131, 56, 236, 0.4);

    /* Z-Index Scale */
    --z-background: 1;
    --z-content: 10;
    --z-papel-background: 5;
    --z-papel-foreground: 100;
    --z-skull: 200;
    --z-cursor: 9999;

    /* Layout */
    --max-width-content: 1200px;
    --max-width-text: 65ch;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    :root {
        --text-3xl: 2.5rem;
        /* 40px on mobile */
        --text-4xl: 3rem;
        /* 48px on mobile */
        --space-12: 4rem;
        /* Reduce large spacing */
        --space-16: 5rem;
    }
}