:root {
    /* Colors - Updated based on User Feedback (Dark Theme) */
    --color-bg-body: #170537;
    /* Primary Dark Base */
    --color-bg-card: rgba(255, 255, 255, 0.05);
    /* Glass effect */
    --color-bg-card-hover: rgba(255, 255, 255, 0.1);

    --color-primary: #170537;
    --color-secondary: #49b9ac;
    /* Teal */
    --color-accent: #03a0e1;
    /* Cyan */

    --color-text-main: #FFFFFF;
    /* White text for dark mode */
    --color-text-light: #cbd5e1;
    /* Light gray for secondary text */
    --color-text-dark: #170537;
    /* For buttons or light backgrounds if any */

    --color-white: #FFFFFF;

    /* Typography */
    --font-family: 'Montserrat', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* UI Elements */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    /* Darker shadows */
    --box-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}