/* CSS Variables for theming */
:root {
    /* Dark theme variables */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2d2d30;
    --bg-card: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #888;
    --border-primary: #333;
    --border-secondary: rgba(139, 92, 246, 0.5);
    --accent-primary: #8b5cf6;
    --accent-secondary: #06b6d4;
    --gradient-primary: linear-gradient(45deg, #8b5cf6, #06b6d4);
    --gradient-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 100%);
    --overlay-bg: rgba(139, 92, 246, 0.05);
    --overlay-hover: rgba(139, 92, 246, 0.1);
    --shadow-color: rgba(139, 92, 246, 0.3);
    --error-color: #ef4444;
    --success-color: #10b981;
}

[data-theme="light"] {
    /* Light theme variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    --bg-card: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-primary: #e2e8f0;
    --border-secondary: rgba(139, 92, 246, 0.3);
    --accent-primary: #7c3aed;
    --accent-secondary: #0ea5e9;
    --gradient-primary: linear-gradient(45deg, #7c3aed, #0ea5e9);
    --gradient-bg: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    --overlay-bg: rgba(139, 92, 246, 0.08);
    --overlay-hover: rgba(139, 92, 246, 0.12);
    --shadow-color: rgba(139, 92, 246, 0.2);
    --error-color: #dc2626;
    --success-color: #059669;
}