/* ═══════════════════════════════════════════
   tokens.css — Design Tokens (CSS Variables)
   المصدر: DESIGN_REFERENCE.html — لا تعدّل يدوياً
   ═══════════════════════════════════════════ */

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

:root {
  /* ── خلفيات (وضع داكن — الافتراضي في CSS) ── */
  --bg-base:     #050810;
  --bg-0:        #07101f;
  --bg-1:        #0b1628;
  --bg-2:        #0f1d33;
  --bg-3:        #142640;
  --bg-raised:   rgba(11, 22, 40, 0.6);
  --bg-raised-2: rgba(15, 29, 51, 0.7);

  /* ── خطوط ── */
  --line-1:      rgba(148, 184, 230, 0.06);
  --line-2:      rgba(148, 184, 230, 0.12);
  --line-3:      rgba(148, 184, 230, 0.22);
  --line-accent: rgba(56, 189, 248, 0.3);

  /* ── نصوص ── */
  --text-0: #f3f7fc;
  --text-1: #d9e5f3;
  --text-2: #9fb5cf;
  --text-3: #6a8099;
  --text-4: #3e5673;

  /* ── لون مميز ── */
  --accent:    #38bdf8;
  --accent-2:  #3b82f6;
  --accent-bg:   rgba(56, 189, 248, 0.08);
  --accent-bg-2: rgba(56, 189, 248, 0.16);

  /* ── الشعار — ثابت في كلا الوضعين ── */
  --logo-bg: #0a1628;

  /* ── خطوط ── */
  --font-mono:  'Geist Mono', 'SF Mono', Menlo, monospace;
  --font-sans:  'Geist', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-ar:    'IBM Plex Sans Arabic', 'Geist', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* ── spacing ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── radii ── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 100px;

  /* ── transitions ── */
  --t-fast:   0.15s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.3s ease;

  /* ── layout ── */
  --container-max: 1280px;
  --container-px:  40px;

  /* ── aliases: background ── */
  --bg-primary:   var(--bg-0);
  --bg-secondary: var(--bg-1);
  --bg-tertiary:  var(--bg-2);
  --bg-card:      var(--bg-1);

  /* ── aliases: text ── */
  --text-primary:   var(--text-0);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-3);

  /* ── aliases: color ── */
  --blue-primary: var(--accent-2);
  --blue-accent:  var(--accent);

  /* ── aliases: border ── */
  --border:         var(--line-2);
  --border-primary: var(--line-2);
  --border-secondary: var(--line-1);

  /* ── aliases: spacing ── */
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-7: 28px;
  --space-8: var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);

  /* ── aliases: radius ── */
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  var(--r-2xl);
  --radius-full: var(--r-full);

  /* ── aliases: transitions ── */
  --transition-quick:    var(--t-fast);
  --transition-standard: var(--t-base);
  --transition-slow:     var(--t-slow);

  /* ── aliases: fonts ── */
  --font-primary: var(--font-ar);
  --font-display: var(--font-serif);

  /* ── typography scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
}

/* ─── الوضع الفاتح (light) ─── */
[data-theme="light"] {
  --bg-base:     #fafbfd;
  --bg-0:        #ffffff;
  --bg-1:        #f4f7fb;
  --bg-2:        #edf2f9;
  --bg-3:        #e4ecf5;
  --bg-raised:   rgba(255, 255, 255, 0.7);
  --bg-raised-2: rgba(244, 247, 251, 0.8);

  --line-1:      rgba(11, 22, 40, 0.05);
  --line-2:      rgba(11, 22, 40, 0.1);
  --line-3:      rgba(11, 22, 40, 0.18);
  --line-accent: rgba(37, 99, 235, 0.25);

  --text-0: #05111f;
  --text-1: #0f2545;
  --text-2: #3d5a80;
  --text-3: #6b85a6;
  --text-4: #a3b7ce;

  --accent:    #0284c7;
  --accent-2:  #2563eb;
  --accent-bg:   rgba(37, 99, 235, 0.05);
  --accent-bg-2: rgba(37, 99, 235, 0.11);

  /* --logo-bg لا يتغير — دائماً #0a1628 */
}

/* ─── Language Toggle System ─── */
/* Default Arabic: show ar-text, hide en-text */
.en-text { display: none; }
.ar-text { display: inline; }

/* English mode: show en-text, hide ar-text */
[data-lang="en"] .ar-text { display: none !important; }
[data-lang="en"] .en-text { display: inline !important; }
[data-lang="en"] .en-block { display: block !important; }
[data-lang="en"] .ar-block { display: none !important; }

/* Direction & font switch in English mode */
[data-lang="en"] { direction: ltr; }
[data-lang="en"] body { font-family: var(--font-sans); }

/* Lang toggle button in navbar */
.lang-toggle {
  background: transparent;
  border: 1px solid var(--line-3);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast);
  min-width: 38px;
  text-align: center;
}
.lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* Old .en span — backwards compat: hidden by default, visible in lang toggle mode */
.en { display: none; }
[data-lang="en"] .en { display: inline; }
[data-lang="en"] [class*="ar-only"] { display: none; }