:root {
    /* Golden Ratio Foundation */
    --golden-ratio: 1.618;
    --inverse-golden-ratio: 0.618;
    
    /* Layout Dimensions */
    --header-height: 80px;
    --nav-width: calc(100vw / (var(--golden-ratio) * 2.75)); /* ~22.4% of viewport width */
    --footer-height: 60px;
    --content-padding: 2rem;
    --grid-gap: 1rem;
    
    /* Typography Scale */
    --text-tiny: 0.75rem;
    --text-small: 0.875rem;
    --text-standard: 1rem;
    --text-medium: 1.125rem;
    --text-large: 1.25rem;
    --text-xl: 1.5rem;
    --text-xxl: 2rem;
    --text-xxxl: 3rem;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    
    /* Color Systems */
    --primary: #6366f1;
    --primary-light: #a5b4fc;
    --primary-dark: #4338ca;
    --secondary: #64748b;
    --accent: #10b981;
    --accent-alt: #f59e0b;
    
    /* Add compatibility properties for color control panel */
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-accent: var(--accent);
    --primary-color: var(--primary);
    --secondary-color: var(--secondary);
    --accent-color: var(--acce