/* ===================================
   CSS Custom Properties (Variables)
   =================================== */

:root {
    /* Colors - Default (Dark) */
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-secondary: #64748b;
    
    /* Accent Colors */
    --accent: #8b5cf6;
    --accent-light: #a78bfa;
    --accent-glow: rgba(139, 92, 246, 0.5);
    
    /* Semantic Colors */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    
    /* Spacing & Borders */
    --radius: 16px;
    --radius-sm: 10px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* Retro Theme */
[data-theme="retro"] {
    --bg-color: #2d1810;
    --card-bg: #d4b483;
    --text-main: #2d1810;
    --text-muted: #4a3728;
    --text-secondary: #6b5544;
    --accent: #8b4513;
    --accent-light: #a0522d;
    --accent-glow: rgba(139, 69, 19, 0.5);
    --success: #2d5a27;
    --danger: #8b0000;
    --warning: #b8860b;
}

/* Leather Theme */
[data-theme="leather"] {
    --bg-color: #1a0f0a;
    --card-bg: #c9a227;
    --text-main: #1a0f0a;
    --text-muted: #3d2914;
    --text-secondary: #5c4033;
    --accent: #8b4513;
    --accent-light: #a0522d;
    --accent-glow: rgba(139, 69, 19, 0.6);
    --success: #2d5a27;
    --danger: #8b0000;
    --warning: #b8860b;
}