/* Light Theme Variables */
:root.light-theme {
    /* Core Colors - Bronze and Gold Scheme but for light mode */
    --primary-color: #cd9c48; /* Keep the bronze primary color */
    --primary-hover: #d9b36c;
    --secondary-color: #dba520; /* Darker gold for better contrast on light bg */
    --secondary-hover: #c89b1e;
    --accent-color: #e55d3e; /* Darker warm accent for light bg */
    
    /* Neutrals - Light and airy tones */
    --bg-color: #f5f5f5; /* Light background */
    --bg-surface: #ffffff; /* White surface */
    --bg-elevated: #f0f0f0; /* Slightly darker for elevated elements */
    --bg-highlight: rgba(205, 156, 72, 0.1); /* Subtle bronze highlight */
    
    /* Text Colors - Dark with gold accents */
    --text-primary: #333333; /* Dark for primary text */
    --text-secondary: #9e7730; /* Darker gold for secondary/highlighted text */
    --text-muted: #777777; /* Muted grey text */
    
    /* Status Colors - Same as dark theme but slightly adjusted */
    --success: #2d9c65;
    --warning: #e69500;
    --error: #d32f2f;
    --info: #4455dd;
    
    /* Borders - Light with gold accents */
    --border-thin: #e0e0e0;
    --border-thick: #cccccc;
    --border-gold: rgba(205, 156, 72, 0.3);
    
    /* Effects - Softer lighting */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(205, 156, 72, 0.15);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-gold: 0 0 15px rgba(205, 156, 72, 0.2);
    
    /* Gradients - Gold and bronze */
    --gradient-primary: linear-gradient(135deg, #cd9c48, #dba520);
    --gradient-secondary: linear-gradient(135deg, #dba520, #c89b1e);
    --gradient-accent: linear-gradient(135deg, #e55d3e, #f7a676);
    --gradient-dark: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    --gradient-gold: linear-gradient(135deg, #dba520, #cd9c48, #dba520);
}

/* Light Theme Background */
body.light-theme::before {
    background: 
        radial-gradient(circle at 15% 50%, rgba(205, 156, 72, 0.03) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(219, 165, 32, 0.03) 0%, transparent 25%),
        linear-gradient(135deg, rgba(245, 245, 245, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
}

/* Light Theme Grid Pattern Overlay */
body.light-theme::after {
    background-image: 
        linear-gradient(to right, rgba(205, 156, 72, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(205, 156, 72, 0.03) 1px, transparent 1px);
    opacity: 0.1;
}

/* Header for light theme */
body.light-theme .main-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* Text color adjustments for light theme */
body.light-theme .nav-links a {
    color: #333333;
}

body.light-theme .nav-links a:hover,
body.light-theme .nav-links a.active {
    color: #cd9c48;
}

/* Box styling for light theme */
body.light-theme .left_box,
body.light-theme .right_box,
body.light-theme .center_box {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-thin);
}

body.light-theme .box-header {
    border-bottom: 1px solid var(--border-thin);
    background-color: rgba(245, 245, 245, 0.5);
}

/* Button styling for light theme */
body.light-theme .btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

body.light-theme .btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
}

/* Hero section for light theme */
body.light-theme .hero-section {
    background-color: rgba(250, 250, 250, 0.7);
    box-shadow: var(--shadow-sm);
}

body.light-theme .hero-content {
    color: var(--text-primary);
}

/* Form elements for light theme */
body.light-theme .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-thin);
    color: var(--text-primary);
}

body.light-theme .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(205, 156, 72, 0.2);
}

/* Tables for light theme */
body.light-theme .table th {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-thin);
}

body.light-theme .table td {
    border-bottom: 1px solid var(--border-thin);
}

body.light-theme .table tr:hover td {
    background-color: var(--bg-highlight);
}

/* Server status card for light theme */
body.light-theme .server-status-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-thin);
}

body.light-theme .server-status-card::before {
    background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(240, 240, 240, 0.3));
}

/* Other specific light theme adjustments */
body.light-theme .nav-menu a {
    color: var(--text-primary);
    border-left: 3px solid transparent;
}

body.light-theme .nav-menu a:hover,
body.light-theme .nav-menu a.active {
    color: var(--primary-color);
    background-color: var(--bg-highlight);
    border-left: 3px solid var(--primary-color);
}

/* Scrollbar for light theme */
body.light-theme::-webkit-scrollbar-track {
    background: rgba(240, 240, 240, 0.8);
}

body.light-theme::-webkit-scrollbar-thumb {
    background-color: rgba(205, 156, 72, 0.4);
    border-radius: 6px;
}

body.light-theme::-webkit-scrollbar-thumb:hover {
    background-color: rgba(205, 156, 72, 0.6);
} 