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

:root {
  --ink: #0f172a;
  --cream: #f8fafc;
  --lime: #dbeafe;
  --orange: #2563eb;
  --muted: #64748b;
  --border: #e2e8f0;
}

body {
  font-family: 'IBM Plex Sans Arabic', Cairo, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.nav { border-bottom: 1px solid var(--border); }
.links a:hover, .login:hover { color: var(--orange); }
.button { background: linear-gradient(100deg, #2563eb, #1d4ed8); box-shadow: 0 10px 24px rgb(37 99 235 / 20%); }
.cards article, .detail-box, .join-card, .form-page form {
  border-color: var(--border);
  box-shadow: 0 4px 20px -2px rgb(15 23 42 / 5%), 0 2px 6px -2px rgb(15 23 42 / 3%);
}
.cards article:hover, .join-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 20px 30px -4px rgb(15 23 42 / 8%), 0 8px 12px -3px rgb(37 99 235 / 8%);
}