/* ============================================================
   ALHEIRAT — Design Tokens (Minimalist)
   Brand: navy #001f45, gold #ffc300, cream #f1ece2
   Font: IBM Plex Sans Arabic
   ============================================================ */

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

:root {
  /* brand — unchanged */
  --navy-900: #001129;
  --navy-800: #001f45;
  --navy-700: #002e66;
  --navy-600: #003d8f;
  --navy-500: #0057c7;
  --gold-600: #d9a400;
  --gold-500: #ffc300;
  --gold-400: #ffd84d;
  --gold-300: #ffe380;
  --cream-100: #faf7f0;
  --cream-200: #f5f1e6;
  --cream-300: #ece6d4;

  /* neutrals */
  --ink: #0a1628;
  --ink-2: #1a2942;
  --muted: #5e6a82;
  --muted-2: #8a95a8;
  --line: #eae6dc;
  --line-2: #f1ede3;
  --surface: #ffffff;
  --bg: #fbfaf5;
  --bg-soft: #f5f2ea;

  /* states */
  --success: #10b981;
  --success-soft: #d1fae5;
  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --warn: #f59e0b;
  --warn-soft: #fef3c7;
  --info: #3b82f6;

  /* elevation — flatter */
  --shadow-xs: 0 1px 0 rgba(10, 22, 40, 0.03);
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.05);
  --shadow-lg: 0 8px 24px rgba(10, 22, 40, 0.06);
  --shadow-xl: 0 16px 40px rgba(10, 22, 40, 0.08);
  --shadow-navy: 0 8px 20px rgba(0, 31, 69, 0.08);
  --shadow-gold: 0 6px 16px rgba(255, 195, 0, 0.2);

  /* gradients — kept but used sparingly */
  --grad-navy: linear-gradient(135deg, #001f45 0%, #003d8f 100%);
  --grad-navy-rich: linear-gradient(160deg, #001129 0%, #001f45 100%);
  --grad-gold: linear-gradient(135deg, #ffc300 0%, #ffd84d 100%);
  --grad-gold-rich: linear-gradient(135deg, #d9a400 0%, #ffc300 50%, #ffe380 100%);
  --grad-cream: linear-gradient(135deg, #faf7f0 0%, #f5f1e6 100%);
  --grad-mesh: linear-gradient(160deg, #001f45 0%, #001129 100%);
  --grad-mesh-light: linear-gradient(180deg, #fbfaf5 0%, #f5f2ea 100%);

  /* radii — tighter */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* timings */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-xs: 120ms;
  --dur-sm: 180ms;
  --dur-md: 280ms;
  --dur-lg: 450ms;

  /* layout */
  --nav-w: 240px;
  --nav-w-mini: 68px;
  --topbar-h: 60px;
  --max-w: 1200px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea { outline: none; }
[hidden] { display: none !important; }

/* scrollbar — thinner */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10, 22, 40, 0.12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10, 22, 40, 0.22); }

::selection { background: rgba(255, 195, 0, 0.35); color: var(--navy-900); }

/* typography helpers */
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
h4 { font-size: 14px; }
small, .text-sm { font-size: 12.5px; }
.text-xs { font-size: 11.5px; }
.text-lg { font-size: 16px; }
.text-muted { color: var(--muted); }
.text-gold { color: var(--gold-600); }
.text-navy { color: var(--navy-800); }

/* utility */
.hstack { display: flex; align-items: center; gap: 12px; }
.vstack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.hide-mobile { display: inherit; }
.only-mobile { display: none; }
@media (max-width: 820px) {
  .hide-mobile { display: none !important; }
  .only-mobile { display: inherit; }
}