:root{
  --background: 220 40% 8%;
  --foreground: 40 30% 96%;
  --card: 220 35% 12%;
  --card-foreground: 40 30% 96%;
  --popover: 220 35% 12%;
  --popover-foreground: 40 30% 96%;
  --primary: 40 85% 55%;
  --primary-foreground: 220 40% 8%;
  --secondary: 220 28% 18%;
  --secondary-foreground: 40 30% 96%;
  --muted: 220 22% 22%;
  --muted-foreground: 220 10% 70%;
  --border: 220 18% 28%;
  --input: 220 18% 28%;
  --ring: 40 85% 55%;
  --navy: 220 55% 12%;
}

/* ============================= */
/* ===== Global Fixes ===== */
/* ============================= */

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Noto Kufi Arabic", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  direction: var(--dir, rtl); /* يتغير حسب اللغة */
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  margin:0;
  padding-top:80px; /* يمنع تداخل الهيدر */
}

/* يمنع العناوين من الانبلع عند السكرول */
section[id]{
  scroll-margin-top:110px;
}

/* ============================= */
/* ===== Navbar Fixes ===== */
/* ============================= */

/* يضمن الهيدر فوق كل العناصر */
#topnav{
  z-index:9999;
}

/* يضمن زر الموبايل ينضغط */
#mobileBtn{
  position:relative;
  z-index:10000;
}

/* ============================= */
/* ======= Brand Styles ======= */
/* ============================= */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.brand-title{
  font-weight:700;
  font-size:18px;
}

.brand-sub{
  font-size:13px;
  opacity:.8;
}

/* ============================= */
/* ===== Logo Styling ===== */
/* ============================= */

.site-logo{
  height:46px;
  width:46px;
  object-fit:cover;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid hsla(var(--border) / .6);
  padding:4px;
  transition:all .3s ease;
}

.site-logo:hover{
  transform:scale(1.05);
  border-color:hsl(var(--primary));
}

/* ============================= */
/* ===== Text Improvements ===== */
/* ============================= */

.text-balance{ text-wrap: balance; }
.text-pretty{ text-wrap: pretty; }

.section-badge{
  letter-spacing:.2px;
}

/* ============================= */
/* ===== Animations ===== */
/* ============================= */

@keyframes fadeInUp{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

.animate-fade-in-up{
  animation:fadeInUp .8s ease both;
}

.animate-fade-in{
  animation:fadeIn .8s ease both;
}

/* ============================= */
/* ===== Accessibility ===== */
/* ============================= */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .animate-fade-in-up,
  .animate-fade-in{
    animation:none;
  }
}