/* ========================================
   THEME VARIABLES - Light Mode (Default)
   ======================================== */
:root {
    /* Background Colors */
    --bg-primary: #f4f6fb;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-sidebar: #333333;
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    
    /* Status Colors */
    --status-new: #3b82f6;
    --status-processing: #f59e0b;
    --status-shipped: #10b981;
    --status-error: #ef4444;
    
    /* Card Colors */
    --card-bg: #ffffff;
    --card-hover-bg: #f9fafb;
    --card-shadow: rgba(0, 0, 0, 0.1);
    
    /* Form Colors */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: #3b82f6;
    
    /* Table Colors */
    --table-header-bg: #f9fafb;
    --table-row-hover: #f9fafb;
    --table-border: #e5e7eb;
}

/* ========================================
   THEME VARIABLES - Dark Mode
   ======================================== */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-sidebar: #222222;
    
    /* Text Colors */
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-inverse: #1f2937;
    
    /* Border Colors */
    --border-primary: #374151;
    --border-secondary: #4b5563;
    
    /* Status Colors */
    --status-new: #60a5fa;
    --status-processing: #fbbf24;
    --status-shipped: #34d399;
    --status-error: #f87171;
    
    /* Card Colors */
    --card-bg: #1f2937;
    --card-hover-bg: #374151;
    --card-shadow: rgba(0, 0, 0, 0.3);
    
    /* Form Colors */
    --input-bg: #111827;
    --input-border: #374151;
    --input-focus-border: #60a5fa;
    
    /* Table Colors */
    --table-header-bg: #111827;
    --table-row-hover: #1f2937;
    --table-border: #374151;
}

/* ========================================
   APPLY THEME VARIABLES TO COMPONENTS
   ======================================== */

/* Sidebar */
.sidebar,
.nav-menu {
    background: var(--bg-sidebar) !important;
}

/* Body and main content */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Cards */
.card,
.order-card,
.stat-card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 2px 4px var(--card-shadow);
}

.card:hover,
.order-card:hover {
    background-color: var(--card-hover-bg);
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--table-header-bg);
    border-color: var(--table-border);
}

.table tbody tr:hover {
    background-color: var(--table-row-hover);
}

.table tbody td {
    border-color: var(--table-border);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--input-focus-border);
    background-color: var(--input-bg);
}

/* Status badges */
.status-badge.new {
    background-color: var(--status-new);
}

.status-badge.processing {
    background-color: var(--status-processing);
}

.status-badge.shipped {
    background-color: var(--status-shipped);
}

/* Text colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

p, span, label {
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-secondary) !important;
}