:root {
  /* Primary - Tadawi Blue #28B8D6 */
  --primary: #28B8D6;
  --primary-light: #4DC8E0;
  --primary-lighter: #9CDEEF;
  --primary-50: #E8F8FC;
  --primary-100: #D1F1F9;
  --primary-200: #A3E3F3;
  --primary-300: #75D5ED;
  --primary-400: #4DC8E0;
  --primary-500: #28B8D6;
  --primary-600: #23A3BF;
  --primary-dark: #1E8EA8;
  --primary-deep: #197991;
  --primary-900: #14647A;

  /* Neutrals */
  --white: #FFFFFF;
  --bg: #F8FBFC;
  --bg-alt: #F1F5F7;
  --border: #E2E8ED;
  --border-light: #F0F4F7;

  /* Text */
  --text-primary: #555757;
  --text-secondary: #475569;
  --text-body: #64748B;
  --text-muted: #94A3B8;
  --text-white: #FFFFFF;

  /* Semantic */
  --green: #22C55E;
  --green-bg: #F0FDF4;
  --red: #EF4444;
  --red-bg: #FEF2F2;
  --amber: #F59E0B;
  --amber-bg: #FFFBEB;

  /* Gradients */
  --gradient-hero: linear-gradient(160deg, #14647A 0%, #28B8D6 50%, #1E8EA8 100%);
  --gradient-primary: linear-gradient(135deg, #28B8D6, #4DC8E0);
  --gradient-dark: linear-gradient(135deg, #197991, #1E8EA8);
  --gradient-card: linear-gradient(180deg, rgba(40,184,214,0.03), rgba(40,184,214,0.06));

  /* Typography */
  --font: 'Plus Jakarta Sans', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en: 'Plus Jakarta Sans', sans-serif;
  --font-ar: 'Cairo', sans-serif;

  /* Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 12px rgba(0,0,0,0.06);
  --sh-lg: 0 8px 24px rgba(0,0,0,0.08);
  --sh-xl: 0 16px 48px rgba(0,0,0,0.1);
  --sh-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --sh-card-hover: 0 8px 32px rgba(40,184,214,0.12), 0 0 0 1px rgba(40,184,214,0.08);
  --sh-primary: 0 4px 16px rgba(40,184,214,0.3);

  /* Layout */
  --max-w: 1240px;
  --header-h: 72px;
  --container-px: 1.5rem;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.3s;
  --dur-slow: 0.5s;

  /* Z-index */
  --z-header: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* ═══ DARK MODE ═══ */
[data-theme="dark"] {
  --white: #1a1d23;
  --bg: #12141a;
  --bg-alt: #1e2128;
  --border: #2a2d35;
  --border-light: #22252d;

  --text-primary: #e4e6ea;
  --text-secondary: #c0c3c9;
  --text-body: #b0b3b8;
  --text-muted: #6b7280;
  --text-white: #FFFFFF;

  --primary-50: #0d2d33;
  --primary-100: #0f3a42;
  --primary-200: #145560;

  --green-bg: #0d2818;
  --red-bg: #2d1215;
  --amber-bg: #2d2410;

  --gradient-card: linear-gradient(180deg, rgba(40,184,214,0.06), rgba(40,184,214,0.1));

  --sh-xs: 0 1px 2px rgba(0,0,0,0.2);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --sh-md: 0 4px 12px rgba(0,0,0,0.3);
  --sh-lg: 0 8px 24px rgba(0,0,0,0.4);
  --sh-xl: 0 16px 48px rgba(0,0,0,0.5);
  --sh-card: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.03);
  --sh-card-hover: 0 8px 32px rgba(40,184,214,0.15), 0 0 0 1px rgba(40,184,214,0.1);
  --sh-primary: 0 4px 16px rgba(40,184,214,0.25);
}

[data-theme="dark"] .sidebar { background: #1a1d23; border-color: #2a2d35; }
[data-theme="dark"] .dash-header { background: rgba(26,29,35,0.95); border-color: #2a2d35; }
[data-theme="dark"] .card, [data-theme="dark"] .dash-widget { background: #1a1d23; border-color: #2a2d35; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1e2128; border-color: #2a2d35; color: #e4e6ea; }
[data-theme="dark"] .dash-table { color: #e4e6ea; }
[data-theme="dark"] .dash-table thead { background: #1e2128; }
[data-theme="dark"] .dash-table td { border-color: #2a2d35; }
[data-theme="dark"] .dash-modal { background: #1a1d23; }
[data-theme="dark"] .dash-modal-header, [data-theme="dark"] .dash-modal-footer { border-color: #2a2d35; }
[data-theme="dark"] .notif-panel { background: #1a1d23; border-color: #2a2d35; }