/* ══════════════════════════════════════════
   vars.css — متغيرات الألوان والثيمات
   ══════════════════════════════════════════ */

/* ─── Light Theme (Default) ─── */
:root {
  --bg:#f4f6f9;
  --s1:#ffffff;
  --s2:#f0f2f6;
  --s3:#e8ebf0;
  --b1:rgba(0,0,0,0.07);
  --b2:rgba(0,0,0,0.12);
  --b3:rgba(0,0,0,0.2);
  --tx:#1a1f2e;
  --tx2:#5a6278;
  --tx3:#9ba3b8;
  --ac:#2563eb;
  --ac2:#1d4ed8;
  --aclite:rgba(37,99,235,0.08);
  --g:#16a34a;
  --gb:rgba(22,163,74,0.1);
  --am:#d97706;
  --amb:rgba(217,119,6,0.1);
  --rd:#dc2626;
  --rdb:rgba(220,38,38,0.1);
  --pu:#7c3aed;
  --pub:rgba(124,58,237,0.1);
  --r:10px;--rs:7px;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --transition-theme: background-color .2s, border-color .2s, color .15s;
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --bg:#0d1117;
  --s1:#161b27;
  --s2:#1e2433;
  --s3:#252c3d;
  --b1:rgba(255,255,255,0.08);
  --b2:rgba(255,255,255,0.13);
  --b3:rgba(255,255,255,0.22);
  --tx:#e2e8f4;
  --tx2:#8892a4;
  --tx3:#4a5568;
  --ac:#60a5fa;
  --ac2:#3b82f6;
  --aclite:rgba(96,165,250,0.12);
  --g:#4ade80;
  --gb:rgba(74,222,128,0.12);
  --am:#fbbf24;
  --amb:rgba(251,191,36,0.12);
  --rd:#f87171;
  --rdb:rgba(248,113,113,0.12);
  --pu:#c084fc;
  --pub:rgba(192,132,252,0.12);
  --shadow:0 1px 3px rgba(0,0,0,0.5),0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 12px rgba(0,0,0,0.5),0 2px 4px rgba(0,0,0,0.4);
}

/* ─── Reset & Base ─── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  background:var(--bg);
  color:var(--tx);
  font-size:14px;
  transition:var(--transition-theme);
}