:root {
    --orange-primary: #F39C3F;
    --orange-dark: #E08A2E;
    --orange-light: #FFB366;
    --blue-primary: #7EC8E3;
    --blue-dark: #5BA8C8;
    --blue-light: #A8DCF0;
    --purple-primary: #8B7BA8;
    --purple-dark: #6B5B88;
    --brown-accent: #5C3D2E;
    --cream-bg: #FFF9F0;
    
    /* Dark theme colors */
    --dark-bg: #1a1a1a;
    --dark-bg-secondary: #242424;
    --dark-bg-tertiary: #2d2d2d;
    --dark-text: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background-color: var(--dark-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.gradient-bg {
    background: linear-gradient(135deg, #C85A5A 0%, #D67373 50%, #E08989 100%);
}

.dark-gradient-bg {
    background: linear-gradient(135deg, rgba(243, 156, 63, 0.2) 0%, rgba(139, 123, 168, 0.2) 50%, rgba(126, 200, 227, 0.2) 100%);
}

.twitch-purple {
    background-color: #9146FF;
}

.twitch-purple:hover {
    background-color: #772ce8;
}

.btn-orange {
    background-color: var(--orange-primary);
}

.btn-orange:hover {
    background-color: var(--orange-dark);
}

.btn-blue {
    background-color: var(--blue-primary);
}

.btn-blue:hover {
    background-color: var(--blue-dark);
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(243, 156, 63, 0.3);
}

.card-dark {
    background-color: var(--dark-bg-secondary);
    border: 1px solid rgba(243, 156, 63, 0.2);
}

.card-dark:hover {
    border-color: rgba(243, 156, 63, 0.4);
}