:root {
    /* Primary Colors */
    --color-primary: #1a1a1a;
    --color-primary-light: #2a2a2a;
    --color-primary-dark: #0a0a0a;
    
    /* Secondary Colors */
    --color-secondary: #4a4a4a;
    --color-secondary-light: #6a6a6a;
    --color-secondary-dark: #3a3a3a;
    
    /* Accent Colors */
    --color-accent: #ff6b6b;
    --color-accent-light: #ff8787;
    --color-accent-dark: #fa5252;
    
    /* Text Colors */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-light: #ffffff;
    --color-text-muted: #6c757d;
    
    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-card: #ffffff;
    --color-bg-dark: #1a1a1a;
    
    /* Border Colors */
    --color-border: #dee2e6;
    --color-border-light: #e9ecef;
    --color-border-dark: #495057;
    
    /* Overlay Colors */
    --color-overlay-dark: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(255, 255, 255, 0.5);
    
    /* Gradient Effects */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

/* Utility Classes */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-light { background-color: var(--color-bg-primary); }
.bg-dark { background-color: var(--color-bg-dark); }
.bg-card { background-color: var(--color-bg-card); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-light { color: var(--color-text-light); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

.border-primary { border-color: var(--color-border); }
.border-light { border-color: var(--color-border-light); }
.border-dark { border-color: var(--color-border-dark); }

/* Glass Effect */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover Effects */
.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-secondary:hover { background-color: var(--color-secondary); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }

.hover\:text-primary:hover { color: var(--color-text-primary); }
.hover\:text-light:hover { color: var(--color-text-light); }
.hover\:text-accent:hover { color: var(--color-accent); }

/* Button Styles */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-accent:hover {
    background-color: var(--color-accent-dark);
}

/* Card Styles */
.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Section Backgrounds */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-accent {
    background: var(--gradient-accent);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #ffffff;
        --color-text-secondary: #ced4da;
        --color-bg-primary: #1a1a1a;
        --color-bg-secondary: #2a2a2a;
        --color-bg-card: #2a2a2a;
        --color-border: #495057;
    }
}