/* ============================================================
   base.css — Reset, design tokens, typography
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;600;700;900&display=swap');

:root {
  /* Brand palette */
  --navy:   #0f1f3d;
  --navy2:  #162845;
  --navy3:  #1e3560;
  --gold:   #c9a84c;
  --gold2:  #e8c96a;
  --white:  #f8f9fb;
  --gray:   #8a9ab5;
  --gray2:  #d0d8e8;

  /* Semantic */
  --red:    #e05555;
  --green:  #3aaa6e;
  --orange: #e07a35;
  --blue:   #3a7bd5;
  --purple: #7b5ea7;
  --teal:   #2a9d8f;

  /* Shape */
  --r:  14px;
  --r2: 8px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 14px; }

body {
  font-family: 'Noto Sans Arabic', sans-serif;
  background: var(--navy);
  color: var(--white);
  min-height: 100vh;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }

a { color: inherit; text-decoration: none; }

/* Animations */
.fade { animation: fadeIn .25s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Spinner */
.spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(201,168,76,.3);
  border-radius: 50%;
  border-top-color: var(--gold);
  animation: spinKf .6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spinKf { to { transform: rotate(360deg); } }

/* Loading area */
.loading {
  text-align: center;
  padding: 38px;
  color: var(--gray);
}

/* Empty state */
.empty {
  text-align: center;
  padding: 36px 18px;
  color: var(--gray);
}
.empty .icon { font-size: 38px; margin-bottom: 9px; opacity: .4; }

/* Utility classes */
.row        { display: flex; align-items: center; gap: var(--sp-2); }
.row-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.wrap       { flex-wrap: wrap; }
.hidden     { display: none !important; }
hr.divider  { border: none; border-top: 1px solid rgba(255,255,255,.06); margin: var(--sp-4) 0; }