/* ============================================================
   ALHEIRAT — Design Tokens
   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 */
  --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: #e8e4d8;
  --line-2: #efebe0;
  --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 */
  --shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.05), 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 22, 40, 0.06), 0 2px 6px rgba(10, 22, 40, 0.04);
  --shadow-lg: 0 20px 50px rgba(10, 22, 40, 0.08), 0 6px 14px rgba(10, 22, 40, 0.05);
  --shadow-xl: 0 30px 80px rgba(10, 22, 40, 0.12), 0 10px 20px rgba(10, 22, 40, 0.06);
  --shadow-navy: 0 20px 50px rgba(0, 31, 69, 0.18);
  --shadow-gold: 0 10px 30px rgba(255, 195, 0, 0.35);

  /* gradients */
  --grad-navy: linear-gradient(135deg, #001f45 0%, #003d8f 100%);
  --grad-navy-rich: linear-gradient(135deg, #001129 0%, #002e66 50%, #0057c7 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: radial-gradient(1200px 600px at 85% -10%, rgba(255, 195, 0, 0.18), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(0, 87, 199, 0.15), transparent 60%),
               linear-gradient(135deg, #001f45 0%, #001129 100%);
  --grad-mesh-light: radial-gradient(900px 500px at 90% 0%, rgba(255, 195, 0, 0.12), transparent 55%),
                    radial-gradient(700px 400px at 0% 100%, rgba(0, 87, 199, 0.08), transparent 55%),
                    linear-gradient(180deg, #fbfaf5 0%, #f5f1e6 100%);

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --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: 200ms;
  --dur-md: 320ms;
  --dur-lg: 500ms;

  /* layout */
  --nav-w: 260px;
  --nav-w-mini: 76px;
  --topbar-h: 64px;
  --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: 14.5px;
  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 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10, 22, 40, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10, 22, 40, 0.28); }

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

/* typography helpers */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }
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; }
}