/**
 * CSS Custom Properties (Variables)
 * Core design tokens for the entire application
 * Light & Dark theme variables
 */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root, .theme-light, [data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    /* Borders */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    
    /* Shadows */
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    
    /* Cards */
    --card-bg: #ffffff;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* Navigation */
    --navbar-bg: #ffffff;
    --navbar-text: #212529;
    --navbar-hover: rgba(0, 0, 0, 0.05);
    --sidebar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Buttons */
    --btn-primary: #0d6efd;
    --btn-secondary: #6c757d;
    --btn-success: #198754;
    --btn-danger: #dc3545;
    --btn-warning: #ffc107;
    --btn-info: #0dcaf0;
    
    /* Alerts (compatible with admin theme editor) */
    --alert-success-bg: #d1e7dd;
    --alert-success-text: #0f5132;
    --alert-danger-bg: #f8d7da;
    --alert-danger-text: #842029;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #664d03;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #055160;
    
    /* Forms */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    
    /* Tables */
    --table-bg: #ffffff;
    --table-striped: #f8f9fa;
    
    /* Links */
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;
}

/* ============================================
   DARK THEME
   ============================================ */
.theme-dark, [data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    
    /* Text Colors */
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    
    /* Borders */
    --border-color: #404040;
    --border-light: #4a5568;
    
    /* Shadows */
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.6);
    
    /* Cards */
    --card-bg: #2d3748;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    
    /* Navigation */
    --navbar-bg: #1a202c;
    --navbar-text: #e2e8f0;
    --navbar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    
    /* Buttons (brighter for dark mode) */
    --btn-primary: #4299e1;
    --btn-secondary: #718096;
    --btn-success: #48bb78;
    --btn-danger: #f56565;
    --btn-warning: #ed8936;
    --btn-info: #4299e1;
    
    /* Alerts (compatible with admin theme editor) */
    --alert-success-bg: #2f855a;
    --alert-success-text: #9ae6b4;
    --alert-danger-bg: #c53030;
    --alert-danger-text: #fc8181;
    --alert-warning-bg: #c05621;
    --alert-warning-text: #fbd38d;
    --alert-info-bg: #2c5282;
    --alert-info-text: #90cdf4;
    
    /* Forms */
    --input-bg: #2d3748;
    --input-border: #4a5568;
    
    /* Tables */
    --table-bg: #2d3748;
    --table-striped: #374151;
    
    /* Links */
    --link-color: #63b3ed;
    --link-hover-color: #90cdf4;
}

/* ============================================
   BRAND COLORS (Customizable via Admin)
   ============================================ */
:root {
    /* Default brand gradient */
    --brand-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
    --accent-primary: #ff6b6b;
    --accent-secondary: #ffa726;
}

/* ============================================
   MARKETPLACE CUSTOMIZATION VARIABLES
   ============================================ */
:root {
    /* Profile background customization */
    --profile-bg-type: none;
    --profile-bg-value: transparent;
    --profile-bg-gradient-start: #667eea;
    --profile-bg-gradient-end: #764ba2;
    
    /* Profile border customization */
    --profile-border-type: none;
    --profile-border-color: #667eea;
    --profile-border-width: 3px;
    --profile-border-style: solid;
    --profile-border-glow-color: rgba(102, 126, 234, 0.3);
}

/* ============================================
   Z-INDEX SCALE
   ============================================ */
:root {
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}