/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Humanitarian Data Analytics Platform
   Professional AI + Data + Humanitarian visual identity
   ═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  /* Primary Palette — Deep Navy / Professional Blue */
  --ds-navy-900: #0c1929;
  --ds-navy-800: #111d32;
  --ds-navy-700: #162544;
  --ds-navy-600: #1b2d52;
  --ds-navy-500: #1e3a5f;
  --ds-navy-400: #2563a0;
  --ds-navy-300: #418fde;
  --ds-navy-200: #7bb3eb;
  --ds-navy-100: #bdd7f5;
  --ds-navy-50:  #e8f0fe;

  /* Accent — Subtle Teal */
  --ds-teal-600: #0d7377;
  --ds-teal-500: #14919b;
  --ds-teal-400: #2dd4bf;
  --ds-teal-100: #ccfbf1;

  /* Status — Restrained */
  --ds-red-600: #b91c1c;
  --ds-red-500: #dc2626;
  --ds-red-100: #fee2e2;
  --ds-red-50:  #fef2f2;
  --ds-amber-600: #b45309;
  --ds-amber-500: #d97706;
  --ds-amber-100: #fef3c7;
  --ds-amber-50:  #fffbeb;
  --ds-green-600: #15803d;
  --ds-green-500: #16a34a;
  --ds-green-100: #dcfce7;
  --ds-green-50:  #f0fdf4;
  --ds-blue-600: #1d4ed8;
  --ds-blue-500: #2563eb;
  --ds-blue-100: #dbeafe;

  /* Neutrals */
  --ds-gray-900: #111827;
  --ds-gray-800: #1f2937;
  --ds-gray-700: #374151;
  --ds-gray-600: #4b5563;
  --ds-gray-500: #6b7280;
  --ds-gray-400: #9ca3af;
  --ds-gray-300: #d1d5db;
  --ds-gray-200: #e5e7eb;
  --ds-gray-100: #f3f4f6;
  --ds-gray-50:  #f9fafb;
  --ds-white:    #ffffff;

  /* Semantic */
  --ds-bg:        var(--ds-gray-50);
  --ds-surface:   var(--ds-white);
  --ds-border:    var(--ds-gray-200);
  --ds-text:      var(--ds-gray-800);
  --ds-text-secondary: var(--ds-gray-500);
  --ds-text-muted:     var(--ds-gray-400);

  /* Typography */
  --ds-font: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing Scale (4px base) */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;
  --ds-sp-8: 32px;
  --ds-sp-10: 40px;
  --ds-sp-12: 48px;
  --ds-sp-16: 64px;

  /* Border Radius */
  --ds-radius-sm: 6px;
  --ds-radius: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;
  --ds-radius-full: 9999px;

  /* Shadows */
  --ds-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ds-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --ds-shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --ds-shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
  --ds-shadow-focus: 0 0 0 3px rgba(37,99,235,.2);

  /* Transitions */
  --ds-ease: cubic-bezier(.4,0,.2,1);
  --ds-duration: 200ms;
  --ds-transition: all var(--ds-duration) var(--ds-ease);

  /* Sidebar */
  --ds-sidebar-w: 260px;
  --ds-sidebar-bg: var(--ds-navy-900);
  --ds-sidebar-text: var(--ds-gray-300);
  --ds-sidebar-hover: rgba(255,255,255,.06);
  --ds-sidebar-active: rgba(37,99,235,.15);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ds-font);
  background:var(--ds-bg);
  color:var(--ds-text);
  direction:rtl;
  text-align:right;
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}

/* ── TYPOGRAPHY ── */
.ds-display{font-size:2.2rem;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--ds-white)}
.ds-h1{font-size:1.75rem;font-weight:700;line-height:1.3;color:var(--ds-text)}
.ds-h2{font-size:1.35rem;font-weight:700;line-height:1.35;color:var(--ds-text)}
.ds-h3{font-size:1.1rem;font-weight:600;line-height:1.4;color:var(--ds-text)}
.ds-h4{font-size:.95rem;font-weight:600;line-height:1.45;color:var(--ds-text)}
.ds-body{font-size:.9rem;line-height:1.7;color:var(--ds-text-secondary)}
.ds-small{font-size:.8rem;line-height:1.5;color:var(--ds-text-muted)}
.ds-label{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-text-muted)}

/* ── ICON SYSTEM ── */
.ds-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.ds-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ds-icon-sm{width:16px;height:16px}
.ds-icon-lg{width:24px;height:24px}
.ds-icon-xl{width:32px;height:32px}

/* ── BUTTONS ── */
.ds-btn{
  display:inline-flex;align-items:center;gap:var(--ds-sp-2);
  padding:var(--ds-sp-2) var(--ds-sp-4);
  border-radius:var(--ds-radius-sm);
  font-size:.85rem;font-weight:500;
  transition:var(--ds-transition);
  white-space:nowrap;
  border:1px solid transparent;
}
.ds-btn-primary{background:var(--ds-navy-400);color:var(--ds-white);border-color:var(--ds-navy-400)}
.ds-btn-primary:hover{background:var(--ds-navy-500);box-shadow:var(--ds-shadow-sm)}
.ds-btn-ghost{background:transparent;color:var(--ds-gray-600);border-color:var(--ds-border)}
.ds-btn-ghost:hover{background:var(--ds-gray-100);color:var(--ds-text)}
.ds-btn-success{background:var(--ds-green-600);color:var(--ds-white)}
.ds-btn-success:hover{background:var(--ds-green-500)}
.ds-btn-danger{background:var(--ds-red-500);color:var(--ds-white)}
.ds-btn-danger:hover{background:var(--ds-red-600)}
.ds-btn-sm{padding:var(--ds-sp-1) var(--ds-sp-3);font-size:.78rem}

/* ── CARDS ── */
.ds-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius);
  box-shadow:var(--ds-shadow-xs);
  transition:var(--ds-transition);
}
.ds-card:hover{box-shadow:var(--ds-shadow-sm)}
.ds-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--ds-sp-3) var(--ds-sp-4);
  border-bottom:1px solid var(--ds-border);
}
.ds-card-body{padding:var(--ds-sp-4)}
.ds-card-footer{padding:var(--ds-sp-2) var(--ds-sp-4);border-top:1px solid var(--ds-border)}

/* ── BADGES ── */
.ds-badge{
  display:inline-flex;align-items:center;gap:var(--ds-sp-1);
  padding:2px 10px;border-radius:var(--ds-radius-full);
  font-size:.72rem;font-weight:600;
}
.ds-badge-critical{background:var(--ds-red-100);color:var(--ds-red-600)}
.ds-badge-high{background:var(--ds-amber-100);color:var(--ds-amber-600)}
.ds-badge-moderate{background:var(--ds-blue-100);color:var(--ds-blue-600)}
.ds-badge-low{background:var(--ds-green-100);color:var(--ds-green-600)}
.ds-badge-info{background:var(--ds-navy-50);color:var(--ds-navy-400)}
.ds-badge-outline{background:transparent;border:1px solid var(--ds-border);color:var(--ds-text-secondary)}

/* ── TABLES ── */
.ds-table{width:100%;border-collapse:collapse;font-size:.85rem}
.ds-table th{
  background:var(--ds-gray-50);
  padding:var(--ds-sp-3) var(--ds-sp-4);
  font-weight:600;font-size:.78rem;
  color:var(--ds-text-secondary);
  text-align:right;
  border-bottom:2px solid var(--ds-border);
}
.ds-table td{
  padding:var(--ds-sp-3) var(--ds-sp-4);
  border-bottom:1px solid var(--ds-border);
  color:var(--ds-text);
}
.ds-table tr:hover td{background:var(--ds-gray-50)}

/* ── FORMS ── */
.ds-input,.ds-select{
  width:100%;
  padding:var(--ds-sp-2) var(--ds-sp-3);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-sm);
  font-size:.85rem;
  color:var(--ds-text);
  background:var(--ds-surface);
  transition:var(--ds-transition);
}
.ds-input:focus,.ds-select:focus{
  outline:none;
  border-color:var(--ds-navy-400);
  box-shadow:var(--ds-shadow-focus);
}

/* ── UPLOAD ZONE ── */
.ds-upload-zone{
  border:2px dashed var(--ds-border);
  border-radius:var(--ds-radius-md);
  padding:var(--ds-sp-10) var(--ds-sp-6);
  text-align:center;
  cursor:pointer;
  transition:var(--ds-transition);
}
.ds-upload-zone:hover,.ds-upload-zone.dragover{
  border-color:var(--ds-navy-400);
  background:var(--ds-navy-50);
}
.ds-upload-zone input{display:none}

/* ── STAT CARDS ── */
.ds-stat{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius);
  padding:var(--ds-sp-3) var(--ds-sp-4);
  display:flex;align-items:center;gap:var(--ds-sp-3);
  transition:var(--ds-transition);
}
.ds-stat:hover{box-shadow:var(--ds-shadow-sm);transform:translateY(-1px)}
.ds-stat-icon{
  width:36px;height:36px;border-radius:var(--ds-radius-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ds-stat-icon svg{width:18px;height:18px}
.ds-stat-value{font-size:1.2rem;font-weight:700;line-height:1.2;color:var(--ds-text)}
.ds-stat-label{font-size:.72rem;color:var(--ds-text-secondary);margin-top:1px}

/* ── PROGRESS ── */
.ds-progress{height:6px;background:var(--ds-gray-100);border-radius:var(--ds-radius-full);overflow:hidden}
.ds-progress-fill{height:100%;border-radius:var(--ds-radius-full);transition:width .5s var(--ds-ease)}
.ds-progress-fill.primary{background:var(--ds-navy-400)}
.ds-progress-fill.success{background:var(--ds-green-500)}
.ds-progress-fill.warning{background:var(--ds-amber-500)}
.ds-progress-fill.danger{background:var(--ds-red-500)}

/* ── ANIMATIONS ── */
@keyframes ds-fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes ds-flow{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
@keyframes ds-slide-in-right{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes ds-scale-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.ds-animate-in{animation:ds-fade-in .4s var(--ds-ease) both}
.ds-animate-delay-1{animation-delay:.1s}
.ds-animate-delay-2{animation-delay:.2s}
.ds-animate-delay-3{animation-delay:.3s}
.ds-animate-delay-4{animation-delay:.4s}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .ds-display{font-size:1.5rem}
  .ds-h1{font-size:1.3rem}
  .ds-h2{font-size:1.1rem}
}