/* base.css — Design system: CSS variables, reset, base typography, buttons, icon badge, logo */
/* =========================================================
   FAKHAMA TRAVEL — DESIGN SYSTEM
   ========================================================= */
:root{
  --primary:#0D45A1;
  --primary-grad:#125FDD;
  --accent:#FACD04;
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --surface-2:#EEF2FA;
  --text:#0B1220;
  --muted:#5B6B85;
  --border:rgba(13,69,161,0.10);
  --shadow: 0 1px 2px rgba(13,26,58,.04), 0 12px 28px -12px rgba(13,26,58,.14);
  --shadow-lg: 0 24px 60px -20px rgba(13,26,58,.28);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --font-display: 'ExpoArabic', 'Noto Kufi Arabic', 'Space Grotesk', sans-serif;
  --font-body: 'ExpoArabic', 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
html[lang="en"]{
  --font-display: 'ExpoArabic', 'Space Grotesk', 'Noto Kufi Arabic', sans-serif;
  --font-body: 'ExpoArabic', 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif;
}
html.dark{
  --bg:#0B1220;
  --surface:#101B2E;
  --surface-2:#16233B;
  --text:#F2F5FA;
  --muted:#8CA0C4;
  --border:rgba(255,255,255,0.08);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 34px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.6);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:var(--font-display); font-weight:600; letter-spacing:0.2px;}
.mono{font-family:var(--font-mono);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
.container{max-width:1280px; margin-inline:auto; padding-inline:24px; position:relative; z-index:1;}
section{padding:88px 0;}
@media (max-width:860px){ section{padding:56px 0;} }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, transparent);
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
html.dark .eyebrow{ color:#8FB4FF; background:rgba(143,180,255,.12); }

.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:16.5px;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:14px; font-weight:500; font-size:15px;
  border:1px solid transparent; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .2s ease;
  white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate; will-change:transform;
}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-grad));
  color:#fff; box-shadow:0 10px 24px -8px rgba(13,69,161,.55);
}
.btn-primary:hover{ box-shadow:0 16px 30px -8px rgba(13,69,161,.6); }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ box-shadow:var(--shadow); }
.btn-gold{
  background:var(--accent); color:#241C00; font-weight:700;
  box-shadow:0 10px 22px -10px rgba(250,205,4,.7);
}
.btn-gold:hover{ box-shadow:0 14px 28px -10px rgba(250,205,4,.75); }
.btn-sm{padding:9px 16px; font-size:13.5px; border-radius:10px;}
.btn-block{width:100%;}
.btn:active{ transform:scale(.96) !important; }
html.dark .btn-primary:hover{ box-shadow:0 18px 36px -10px rgba(18,95,221,.7), 0 0 26px 2px rgba(18,95,221,.4); }
html.dark .btn-gold:hover{ box-shadow:0 14px 30px -10px rgba(250,205,4,.5), 0 0 20px 1px rgba(250,205,4,.4); }
html.dark .btn-ghost:hover{ border-color:rgba(143,180,255,.35); box-shadow:0 0 0 1px rgba(143,180,255,.15), var(--shadow-lg); }
.btn .btn-ripple{
  position:absolute; border-radius:50%; transform:scale(0); opacity:.5; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 72%);
  animation:btnRipple .65s ease-out forwards;
}
.btn-ghost .btn-ripple{ background:radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent), transparent 72%); }
@keyframes btnRipple{ to{ transform:scale(2.8); opacity:0; } }

/* Icon */
.icon{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}