/* ============================================
   Design Tokens - مشوار تاورغاء 2026
   نظام متغيرات CSS شامل لكامل التطبيق
   ============================================ */

:root {
  /* ===== Natural Warm Color Palette - مشوار تاورغاء ===== */
  
  /* الكريمي الهادئ - Cream Base */
  --cream-50: #FEFAE0;
  --cream-100: #FEF7D0;
  --cream-200: #FDF4B8;
  
  /* الزيتوني - Olive Green */
  --olive-300: #DDA15E;
  --olive-500: #606C38;
  --olive-600: #4A5428;
  --olive-700: #283618;
  --olive-800: #1A2310;
  
  /* النحاسي - Copper/Bronze */
  --copper-400: #DDA15E;
  --copper-500: #BC6C25;
  --copper-600: #A05A1F;
  --copper-700: #854819;
  
  /* ===== Primary Colors (Olive) ===== */
  --primary-50: var(--cream-50);
  --primary-100: var(--cream-100);
  --primary-200: var(--cream-200);
  --primary-500: var(--olive-500);
  --primary-600: var(--olive-600);
  --primary-700: var(--olive-700);
  
  /* ===== Status Colors (Natural) ===== */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: var(--olive-500);
  --success-600: var(--olive-600);
  
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #dc2626;
  --danger-600: #b91c1c;
  
  --fuel-500: var(--copper-500);
  --fuel-600: var(--copper-600);
  
  /* ===== Neutral Colors - Light Mode ===== */
  --neutral-50: var(--cream-50);
  --neutral-100: var(--cream-100);
  --neutral-200: #F5EFE0;
  --neutral-300: #E8E0CF;
  --neutral-400: #C4B8A0;
  --neutral-500: #9A8F7A;
  --neutral-600: #7A6F5D;
  --neutral-700: #5A4F3D;
  --neutral-800: var(--olive-800);
  --neutral-900: var(--olive-700);
  
  /* ===== Semantic Colors ===== */
  --bg-primary: var(--cream-50);
  --bg-secondary: var(--cream-100);
  --card-bg: #ffffff;
  
  --text-primary: var(--olive-700);
  --text-secondary: var(--olive-600);
  --text-tertiary: var(--neutral-500);
  
  --border-color: var(--neutral-200);
  --border-color-strong: var(--neutral-300);
  
  /* ===== Shadows (Natural & Soft) ===== */
  --shadow-xs: 0 1px 2px 0 rgba(40, 54, 24, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(40, 54, 24, 0.08), 0 1px 2px 0 rgba(40, 54, 24, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(40, 54, 24, 0.1), 0 2px 4px -1px rgba(40, 54, 24, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(40, 54, 24, 0.1), 0 4px 6px -2px rgba(40, 54, 24, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(40, 54, 24, 0.1), 0 10px 10px -5px rgba(40, 54, 24, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(40, 54, 24, 0.15);
  --shadow-glow: 0 0 20px rgba(96, 108, 56, 0.25);
  
  /* ===== Loading Animation Colors ===== */
  --loading-primary: var(--olive-500);
  --loading-secondary: var(--copper-500);
  --loading-gradient-start: var(--olive-500);
  --loading-gradient-mid: var(--copper-400);
  --loading-gradient-end: var(--copper-500);
  
  /* ===== Transitions ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Border Radius ===== */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;
  
  /* ===== Spacing ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* ===== Typography ===== */
  --font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== Z-Index Scale ===== */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --card-bg: #1e293b;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    
    --border-color: #334155;
    --border-color-strong: #475569;
    
    --neutral-50: #1e293b;
    --neutral-100: #334155;
    --neutral-200: #475569;
    --neutral-300: #64748b;
    
    /* Shadows في Dark Mode أقوى قليلاً */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.4);
  }
}

/* Manual Dark Mode Toggle */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --card-bg: #1e293b;
  
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  
  --border-color: #334155;
  --border-color-strong: #475569;
  
  --neutral-50: #1e293b;
  --neutral-100: #334155;
  --neutral-200: #475569;
  --neutral-300: #64748b;
  
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.4);
}

/* ===== Global Resets ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
  text-align: right;
}

/* ===== Utility Classes ===== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--card-bg); }

.shadow-soft { box-shadow: var(--shadow-md); }
.shadow-strong { box-shadow: var(--shadow-lg); }
.shadow-glow { box-shadow: var(--shadow-glow); }

.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }