:root {
    /* Colors */
    --color-primary: #3B82F6;
    --color-on-primary: #FFFFFF;
    --color-primary-gradient-start: #3B82F6;
    --color-primary-gradient-end: #2563EB;

    --color-surface: rgba(255, 255, 255, 0.05);
    --color-on-surface: #FFFFFF;

    --color-background-gradient: radial-gradient(circle at 50% 0%, #2c3e50, #000000 80%);

    --color-glass: rgba(0, 0, 0, 0.7);
    --color-glass-border: rgba(255, 255, 255, 0.05);

    --color-text-primary: #FFFFFF;
    --color-text-secondary: #9CA3AF;

    --color-accent-glow: rgba(59, 130, 246, 0.5);

    --color-success: #34D399;
    --color-error: #F87171;

    --color-header-gradient: linear-gradient(135deg, #60A5FA, #C084FC);

    /* Typography */
    --font-family-sans: 'Inter', sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-h1: 1.25rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;

    /* Spacing */
    --space-1: 8px;
    --space-1-5: 12px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;

    /* Radius */
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 99px;

    /* Shadows */
    --shadow-button: 0 4px 12px var(--color-accent-glow);
    --shadow-card: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

    /* Motion */
    --motion-duration: 0.2s;
    --motion-ease: ease;
    --motion-pop-duration: 0.6s;
    --motion-pop-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Versioning */
    --ui-version: "v1.0.0";
}

/* Light Mode Placeholder (Commented Out) */
/*
.theme-light {
    --color-background-gradient: radial-gradient(circle at 50% 0%, #f0f4f8, #ffffff 80%);
    --color-text-primary: #1F2937;
    --color-text-secondary: #4B5563;
    ...
}
*/