/* Theme Variables - Dark Mode (Default) */
:root,
body[data-theme="dark"] {
    /* Primary Backgrounds */
    --bg-primary: #0a0a0a;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #111111;
    --bg-card: #111111;
    --bg-card-hover: #1a1a1a;
    
    /* Header Backgrounds */
    --header-bg: rgba(5, 5, 5, 0.95);
    --header-bg-scrolled: rgba(5, 5, 5, 0.98);
    --mobile-nav-bg: #0a0a0a;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --text-light: #aaaaaa;
    
    /* Accent Colors */
    --accent-color: #ff3333;
    --accent-dark: #cc0000;
    --accent-light: #ff6666;
    --accent-glow: rgba(255, 51, 51, 0.5);
    
    /* Border Colors */
    --border-color: rgba(255, 51, 51, 0.2);
    --border-light: rgba(255, 255, 255, 0.1);
    
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-glow: rgba(255, 51, 51, 0.2);
    
    /* Gradient */
    --logo-gradient: linear-gradient(135deg, #fff, #ff6666);
    --hero-gradient: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.8));
    --card-gradient: linear-gradient(135deg, rgba(255,51,51,0.15), rgba(204,0,0,0.05));
    
    /* Input Backgrounds */
    --input-bg: #1a1a1a;
    --input-border: #333333;
    --input-focus: #ff3333;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.95);
}

/* Light Mode */
body[data-theme="light"] {
    /* Primary Backgrounds */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #fafafa;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f0;
    
    /* Header Backgrounds */
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-bg-scrolled: rgba(255, 255, 255, 0.98);
    --mobile-nav-bg: #ffffff;
    
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #666666;
    --text-light: #888888;
    
    /* Accent Colors (keeping red for consistency) */
    --accent-color: #e63946;
    --accent-dark: #c1121f;
    --accent-light: #ff6b6b;
    --accent-glow: rgba(230, 57, 70, 0.3);
    
    /* Border Colors */
    --border-color: rgba(230, 57, 70, 0.2);
    --border-light: rgba(0, 0, 0, 0.1);
    
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-glow: rgba(230, 57, 70, 0.15);
    
    /* Gradient */
    --logo-gradient: linear-gradient(135deg, #1a1a1a, #e63946);
    --hero-gradient: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.6));
    --card-gradient: linear-gradient(135deg, rgba(230,57,70,0.1), rgba(193,18,31,0.05));
    
    /* Input Backgrounds */
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-focus: #e63946;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.8);
}

/* Smooth transitions for theme switching */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body * {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}