/* ═══════════ ROOT VARIABLES ═══════════ */
:root {
  --gd: #0b2e1e;
  --gm: #164d30;
  --g:  #1e6b40;
  --gl: #2d8f55;
  --glt:#4aaa6e;
  --gp: #9fd4b2;
  --gb: #e8f5ed;
  --gold: #b8891c;
  --gold-l: #d4a82a;
  --gold-p: #fdf0cc;
  --cream: #faf7f0;
  --ww:  #ffffff;
  --ink: #12200e;
  --mid: #3a4e35;
  --gray: #7a8a72;
  --red:  #c0392b;
  --blue: #1a6fa8;
  --purple:#6c3483;
  --sw: 256px;
  --radius:14px;
  --shadow:0 4px 20px rgba(0,0,0,.08);
}

:root[data-theme="dark"] {
  --cream: #121212;
  --ww: #1e1e1e;
  --ink: #e0e0e0;
  --mid: #a0a0a0;
  --gray: #888888;
  --gd: #0f3f29;
  --gb: #2a3b32;
  --gp: #4a755d;
  --shadow: 0 4px 20px rgba(0,0,0,.5);
  --gold-p: #403010;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Tajawal', sans-serif;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  grid-template-columns: var(--sw) 1fr;
  grid-template-areas: "sidebar main";
  min-height: 100vh;
  overflow: hidden; /* Each area has its own scroll */
  direction: rtl;
}