@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* =====================
   CSS VARIABLES
===================== */
:root {
  --navy:         #0d1b2a;
  --navy-2:       #152236;
  --navy-3:       #1e3450;
  --orange:       #f26522;
  --orange-light: #ff7a35;
  --teal:         #2ec4b6;
  --white:        #ffffff;
  --gray-1:       #f5f6f8;
  --gray-2:       #e8eaed;
  --gray-3:       #9aa3b0;
  --gray-4:       #6b7280;
  --green:        #22c55e;
  --red:          #ef4444;
  --yellow:       #f59e0b;

  --sidebar-w: 240px;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 2px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
}

/* =====================
   RESET
===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  background: var(--gray-1);
  color: var(--navy);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }