:root {
    /* Main Colors */
    --color-background: #121212;
    --color-surface: #1E1E1E;
    --color-background-light: #242424;
    --color-primary: #00FFB2;  /* Bright Mint */
    --color-primary-dark: #007F59; /* Darker shade of primary */
    --color-secondary: #FF3366; /* Hot Pink */
    --color-accent: #7B61FF;   /* Purple */

    /* Text Colors */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #B3B3B3;
    --color-text-muted: #808080;

    /* UI Colors */
    --color-success: #00E676;
    --color-error: #FF5252;
    --color-warning: #FFD740;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00FFB2 0%, #7B61FF 100%);
    --gradient-dark: linear-gradient(135deg, #1E1E1E 0%, #2D2D2D 100%);

    /* Layout Constants */
    --max-width-ultrawide: 1800px;
    --max-width-standard: 1200px;
    --content-padding: 2rem;
}

/* Container for ultrawide optimization */
.container {
    width: 100%;
    max-width: var(--max-width-ultrawide);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}

.container-narrow {
    max-width: var(--max-width-standard);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0;
    padding-top: 80px; /* Add padding for the fixed header */
    transition: padding-top 0.3s ease; /* Smooth transition when header collapses */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

main {
    background-color: var(--color-background);
    flex: 1;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.main-content {
    width: 100%;
    margin: 0 auto;
}

section {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
}

p {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-secondary);
}

/* Media Queries */
@media (min-width: 2560px) {
    :root {
        --content-padding: 4rem;
    }
    
    html {
        font-size: 18px; /* Slightly larger base font for ultrawide */
    }
}

@media (max-width: 1200px) {
    :root {
        --content-padding: 2rem;
    }
    
    html {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    :root {
        --content-padding: 1rem;
    }
    
    html {
        font-size: 14px;
    }
}

/* Ultrawide Screen Optimization */
.container, .container-fluid, .section-container {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1800px) {
    .container, .container-fluid, .section-container {
        max-width: 80%;
    }
    
    section {
        padding-left: 2.5vw;
        padding-right: 2.5vw;
    }
    
    main {
        max-width: 100%;
    }
    
    .main-content {
        max-width: 100%;
    }
}