/* Root variables for colors, fonts, and global settings */
:root {
    /* 1. Define the Color Palette */
    --palette-space-dark: #0A0A14;
    --palette-space-light: #1c1c2b;
    --palette-brand-pink: #D83F87;
    --palette-brand-pink-rgb: 216, 63, 135;
    --palette-brand-teal: #4DD0E1;
    --palette-text-primary: #EAEAEA;
    --palette-text-secondary: #C0C0C0;
    --palette-gold: #FFD700;
    --palette-gold-rgb: 255, 215, 0;
    --palette-white-rgb: 255, 255, 255;


    /* 2. Define the Theme Layer (by purpose) */
    --theme-bg-primary: var(--palette-space-dark);
    --theme-bg-secondary: var(--palette-space-light);
    --theme-text-primary: var(--palette-text-primary);
    --theme-text-secondary: var(--palette-text-secondary);
    --theme-accent-primary: var(--palette-brand-pink);
    --theme-accent-primary-rgb: var(--palette-brand-pink-rgb);
    --theme-accent-secondary: var(--palette-brand-teal);
    --theme-accent-legacy: var(--palette-gold); /* For elements not yet updated */
    --theme-accent-legacy-rgb: var(--palette-gold-rgb);


    /* 3. Deprecated - These will be removed once fully replaced */
    --bg-primary: var(--theme-bg-primary);
    --bg-secondary: var(--theme-bg-secondary);
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --accent-primary: var(--theme-accent-legacy);
    --accent-primary-rgb: var(--theme-accent-legacy-rgb);
    --accent-nebula: var(--theme-accent-primary);
    --accent-nebula-rgb: var(--theme-accent-primary-rgb);
    --accent-tertiary: var(--theme-accent-secondary);

    /* --- End of Theming --- */

    --header-height: 60px;
    --header-gradient-shimmer: #FFFFFF;

    /* Colors for JS Canvas Background */
    --js-star-color-1: rgba(255, 255, 255, 0.95);
    --js-star-color-2: rgba(200, 220, 255, 0.85);
    --js-star-color-3: rgba(255, 210, 180, 0.75);

    --js-nebula-core: rgba(120, 100, 180, 0.08);
    --js-nebula-mid: rgba(255, 105, 180, 0.12);
    --js-nebula-outer: rgba(0, 180, 220, 0.1);

    --js-nebula2-core: rgba(255, 200, 100, 0.1);
    --js-nebula2-outer: rgba(255, 160, 80, 0.15);
}

/* Global body styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000003; /* Very dark base color */
    color: var(--theme-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
    position: relative;
}

/* Styling for the JavaScript Space Background Canvas */
#spaceBackgroundCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind all other content */
    display: block;
}

/* New Section Transition Styling */
.section {
    /* Ensure sections are positioned appropriately for layout (e.g., relative if children are absolute) */
    /* display: none; /* Initially managed by 'hidden-section' in JS */
    opacity: 0;
    transform: translateY(40px); /* Start below the viewport */
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform; /* Hint for browser optimization */
}

.section.active {
    opacity: 1;
    transform: translateY(0);
    /* display: block; /* Or flex, as set by JS removing 'hidden-section' and base HTML structure */
}

/* Global transition classes for fade effects (OLD - comment out or remove if new system works) */
/*
.fade-out {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.8s ease-in, transform 0.8s ease-in !important;
}
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s !important;
}
*/