/* =========================================
   THEME SYSTEM - منصة العربة
   نظام مركزي للألوان والأنماط
   ========================================= */
   
/* =========================================
   THEME METADATA LAYER
   يحدد هوية النظام ويسهل تغيير theme مستقبلاً
   ========================================= */

html[data-theme="default"] {
  /* theme identifier */

}
html {
  --theme-loaded: true;
}


:root {
  /* ===== PRIMARY BRAND COLORS ===== */
  --color-primary: #7c3aed;
  --color-primary-light: #c4b5fd;
  --color-primary-dark: #5b21b6;
  
  /* ===== ACCENT COLORS ===== */
  --color-accent: #a855f7;
  --color-accent-alt: #a855f7;  /* اللون البنفسجي بدلاً من الذهبي */
  --color-accent-orange: #f59e0b;
  
  /* ===== BACKGROUND COLORS ===== */
  --color-bg-main: #faf5ff;
  --color-bg-panel: #FFFFFF;
  --color-bg-secondary: #f5f3ff;
  --color-bg-tertiary: #ede9fe;
  --color-bg-dark: #3b0764;
  --color-bg-medium-dark: #581c87;
  
  /* ===== TEXT COLORS ===== */
  --color-text-primary: #1e1b4b;
  --color-text-secondary: #4c1d95;
  --color-text-muted: #6b21a8;
  --color-text-dark: #3b0764;
  --color-text-light: rgba(255, 255, 255, 0.7);
  --color-text-white: #ffffff;
  
  /* ===== BORDER COLORS ===== */
  --color-border: #ddd6fe;
  --color-border-light: #e9d5ff;
  --color-border-dark: rgba(255, 255, 255, 0.1);
  --color-border-input: #ddd6fe;
  
  /* ===== STATE COLORS ===== */
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #8b5cf6;
  
  /* ===== BADGE & LABEL COLORS ===== */
  --color-badge-primary: #a855f7;
  --color-badge-secondary: #6b7280;
  --color-badge-success: #10b981;
  --color-badge-light: #f3e8ff;
  --color-badge-text: #581c87;
  
  /* ===== SPECIAL PURPOSE COLORS ===== */
  --color-highlight-search: #fef08a;
  --color-highlight-bg: #fef3c7;
  --color-highlight-text: #78350f;
  
  --color-link-dot-green: #10b981;
  --color-link-dot-red: #ef4444;
  
  --color-instruction-box-bg: #f3e8ff;
  --color-instruction-box-border: #d8b4fe;
  --color-instruction-box-alt-bg: #ede9fe;
  --color-instruction-box-alt-border: #c4b5fd;
  --color-instruction-box-alt-text: #4c1d95;
  
  --color-error-log-bg: #fee2e2;
  --color-error-log-border: #fca5a5;
  
  /* باقي القيم */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 15px rgba(0,0,0,0.05);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --radius-xl: 50px;
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 25px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
}

/* =========================================
   FALLBACK SAFETY LAYER
   يمنع الانهيار البصري إذا لم يتم تحميل theme variables
   ========================================= */
/*
body {
  background-color: var(--color-bg-secondary, #f5f3ff);
  color: var(--color-text-primary, #1e1b4b);
}

a {
  color: var(--color-primary, #7c3aed);
}

.card, .panel, .container-box {
  background-color: var(--color-bg-panel, #ffffff);
  border-color: var(--color-border, #ddd6fe);
}

button, .btn {
  background-color: var(--color-accent-alt, #a855f7);
  color: var(--color-text-white, #ffffff);
}

input, select, textarea {
  border-color: var(--color-border-input, #ddd6fe);
  color: var(--color-text-primary, #1e1b4b);
  background-color: var(--color-bg-panel, #ffffff);
}
*/

/* ===== GLOBAL STYLES ===== */
body {
  background-color: var(--color-bg-secondary);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--color-text-primary);
}

/* ===== UTILITY CLASSES ===== */
.text-primary-custom {
  color: var(--color-primary) !important;
}

.text-accent {
  color: var(--color-accent-alt) !important;
}

.bg-primary-custom {
  background-color: var(--color-primary) !important;
}

.bg-accent {
  background-color: var(--color-accent-alt) !important;
}

.border-primary-custom {
  border-color: var(--color-primary) !important;
}

.border-accent {
  border-color: var(--color-accent-alt) !important;
}