/* ═══════════════════════════════════════════════════════════════
   منصة تعليمية شرعية — نظام التصميم الإسلامي
   Islamic Sacred Design System
   لوحة: Burgundy + Beige — زخارف هندسية إسلامية — مخطوطات
   يُحمَّل بعد site.css ليتجاوز كل الرموز القديمة.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Burgundy brand ramp ── */
  --brand-950: #2a0d14;
  --brand-900: #3d121c;
  --brand-800: #4a1520;
  --brand-700: #6b1e2f;
  --brand-600: #7a2436;
  --brand-500: #8b2942;
  --brand-400: #a33d56;
  --brand-300: #c46b7e;
  --brand-100: rgba(107, 30, 47, 0.10);
  --brand-50:  rgba(107, 30, 47, 0.05);

  /* ── Beige / parchment ── */
  --beige-50:  #fbf6ee;
  --beige-100: #f3e8d8;
  --beige-200: #ead9c0;
  --beige-300: #dcc9a8;
  --beige-400: #c4a882;
  --beige-500: #a88b5e;
  --beige-soft: rgba(196, 168, 130, 0.22);

  /* ── Accents (warm bronze — metalwork feel, not gold-neon) ── */
  --gold-700: #8a6a3a;
  --gold-600: #a07d45;
  --gold-500: #b8924a;
  --gold-400: #cba86a;
  --gold-300: #dfc48e;
  --gold-soft: rgba(184, 146, 74, 0.16);

  --brand: #6b1e2f;
  --accent: #6b1e2f;
  --accent-soft: rgba(107, 30, 47, 0.12);
  --accent-violet: #5c1a28;
  --accent-cyan: #7a2436;
  --accent-amber: #b8924a;
  --accent-green: #6b1e2f;
  --accent-gold: #b8924a;

  /* ── Surfaces (رقّ / parchment) ── */
  --page-bg: #f3e8d8;
  --page-bg-alt: #ead9c0;
  --card-bg: #fbf6ee;
  --card: #fbf6ee;
  --card-bg-strong: #fffdf8;
  --card-soft: #ead9c0;

  --surface-soft: rgba(107, 30, 47, 0.06);
  --surface-strong: rgba(74, 21, 32, 0.10);
  --surface-highlight: rgba(184, 146, 74, 0.14);
  --surface-highlight-strong: rgba(184, 146, 74, 0.22);

  /* ── Text (حبر دافئ) ── */
  --text: #2c1810;
  --text-strong: #1a0e0a;
  --muted: #7a6554;
  --muted-strong: #5c4a3c;

  /* ── Borders & shadows ── */
  --border: rgba(74, 21, 32, 0.12);
  --border-strong: rgba(107, 30, 47, 0.28);
  --brand-border: var(--border);
  --gold-border: rgba(184, 146, 74, 0.48);
  --shadow: 0 14px 36px rgba(42, 13, 20, 0.14);
  --shadow-soft: 0 4px 18px rgba(42, 13, 20, 0.09);
  --shadow-strong: 0 24px 56px rgba(42, 13, 20, 0.22);
  --shadow-gold: 0 8px 26px rgba(168, 139, 94, 0.28);

  /* ── Primary ── */
  --primary: #6b1e2f;
  --primary-strong: #4a1520;
  --primary-weak: rgba(107, 30, 47, 0.10);

  /* ── Fields ── */
  --field-bg: #fffdf8;
  --field-text: var(--text);
  --field-border: rgba(74, 21, 32, 0.18);

  /* ── Buttons ── */
  --btn-solid-bg: linear-gradient(145deg, #3d121c 0%, #6b1e2f 48%, #8b2942 100%);
  --btn-solid-text: #fbf6ee;
  --btn-gold-bg: linear-gradient(145deg, #a07d45 0%, #b8924a 50%, #dfc48e 100%);
  --btn-gold-text: #2a1808;

  /* ── Status ── */
  --success: #3d6b4f;
  --danger: #b33a3a;
  --warning: #b8924a;
  --success-soft-bg: rgba(61, 107, 79, 0.12);
  --success-soft-border: rgba(61, 107, 79, 0.36);
  --danger-soft-bg: rgba(179, 58, 58, 0.12);
  --danger-soft-border: rgba(179, 58, 58, 0.36);
  --warning-soft-bg: rgba(184, 146, 74, 0.16);
  --warning-soft-border: rgba(184, 146, 74, 0.42);

  /* ── Radii (أقواس هندسية — ليست حبوب دائرية) ── */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-arch: 50% 50% 8px 8px / 28% 28% 8px 8px;

  /* ── Theme switch ── */
  --sw-bg: #dcc9a8;
  --sw-knob: #fbf6ee;

  /* ── Header ── */
  --hdr-bg: linear-gradient(120deg, #2a0d14 0%, #3d121c 42%, #4a1520 100%);
  --hdr-text: #fbf6ee;
  --hdr-border: rgba(184, 146, 74, 0.36);
  --hdr-fade: transparent;

  /* ── Decorative ── */
  --grid-line: rgba(107, 30, 47, 0.06);
  --page-glow-1: rgba(107, 30, 47, 0.12);
  --page-glow-2: rgba(184, 146, 74, 0.14);

  --grad-brand: linear-gradient(135deg, #4a1520, #8b2942);
  --grad-gold: linear-gradient(135deg, #a07d45, #dfc48e);
  --grad-hero: linear-gradient(165deg, #2a0d14 0%, #4a1520 48%, #6b1e2f 100%);
  --grad-parchment: linear-gradient(180deg, #fbf6ee 0%, #f3e8d8 55%, #ead9c0 100%);

  /* ── Fonts (مخطوط إسلامي) ── */
  --font-display: 'Amiri', 'Scheherazade New', 'El Messiri', serif;
  --font-body: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-calli: 'Aref Ruqaa', 'Amiri', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;

  /* ── زخرفة هندسية إسلامية (نجمة ثمانية + معينات) ── */
  --ornament-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%236b1e2f' stroke-opacity='0.07' stroke-width='1.1'%3E%3Cpath d='M36 6l6.5 14.5L58 24l-11.5 8.5L50 48l-14-7.5L22 48l3.5-15.5L14 24l15.5-3.5z'/%3E%3Cpath d='M36 18l3.5 8L48 28l-6.5 4.5L44 42l-8-4.2L28 42l2.5-9.5L24 28l8.5-2z'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%236b1e2f' stroke-opacity='0.08' stroke-width='1' d='M24 2L46 24 24 46 2 24zM24 12L36 24 24 36 12 24z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  /* البراند والبيج يبقيان كما هما للهيدر/السايدبار/النصوص الفاتحة على الخمري */
  --brand: #c46b7e;
  --brand-500: #a33d56;
  --brand-600: #8b2942;
  --brand-400: #c46b7e;
  --brand-300: #df9eac;
  --brand-100: rgba(196, 107, 126, 0.14);
  --brand-50:  rgba(196, 107, 126, 0.08);

  --beige-400: #c4a882;
  --beige-500: #dfc48e;

  /* أسطح الصفحة فقط تُظلِم */
  --page-bg: #10080b;
  --page-bg-alt: #181014;
  --card-bg: #1c1216;
  --card: #1c1216;
  --card-bg-strong: #24181c;
  --card-soft: #161014;

  --surface-soft: rgba(196, 107, 126, 0.10);
  --surface-strong: rgba(163, 61, 86, 0.18);
  --surface-highlight: rgba(184, 146, 74, 0.14);
  --surface-highlight-strong: rgba(184, 146, 74, 0.24);

  --text: #efe4d6;
  --text-strong: #fff8f0;
  --muted: #a89482;
  --muted-strong: #cbb8a4;

  --border: rgba(255, 248, 240, 0.10);
  --border-strong: rgba(196, 107, 126, 0.36);
  --brand-border: var(--border);
  --gold-border: rgba(223, 196, 142, 0.42);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-strong: 0 24px 56px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 8px 26px rgba(0, 0, 0, 0.5);

  --primary: #c46b7e;
  --primary-strong: #dfc48e;
  --primary-weak: rgba(196, 107, 126, 0.18);

  --accent: #c46b7e;
  --accent-soft: rgba(196, 107, 126, 0.18);

  --success-soft-bg: rgba(61, 107, 79, 0.18);
  --success-soft-border: rgba(61, 107, 79, 0.42);
  --danger-soft-bg: rgba(179, 58, 58, 0.18);
  --danger-soft-border: rgba(179, 58, 58, 0.42);
  --warning-soft-bg: rgba(223, 196, 142, 0.16);
  --warning-soft-border: rgba(223, 196, 142, 0.40);

  --field-bg: #141014;
  --field-text: #efe4d6;
  --field-border: rgba(255, 248, 240, 0.14);

  --btn-solid-bg: linear-gradient(145deg, #3d121c 0%, #6b1e2f 55%, #8b2942 100%);
  --btn-solid-text: #fbf6ee;
  --btn-gold-text: #2a1808;

  --hdr-bg: linear-gradient(120deg, #2a0d14 0%, #3d121c 50%, #4a1520 100%);
  --hdr-border: rgba(223, 196, 142, 0.28);
  --hdr-text: #fbf6ee;

  --grid-line: rgba(196, 107, 126, 0.08);
  --page-glow-1: rgba(163, 61, 86, 0.18);
  --page-glow-2: rgba(184, 146, 74, 0.10);
  --grad-hero: linear-gradient(165deg, #10080b 0%, #1a0a10 48%, #2a0d14 100%);
  --grad-parchment: linear-gradient(180deg, #181014 0%, #10080b 55%, #0c0608 100%);
  --grad-brand: linear-gradient(135deg, #3d121c, #8b2942);
  --grad-gold: linear-gradient(135deg, #a07d45, #dfc48e);

  --sw-bg: #3d2820;
  --sw-knob: #efe4d6;

  --ornament-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c46b7e' stroke-opacity='0.10' stroke-width='1.1'%3E%3Cpath d='M36 6l6.5 14.5L58 24l-11.5 8.5L50 48l-14-7.5L22 48l3.5-15.5L14 24l15.5-3.5z'/%3E%3Cpath d='M36 18l3.5 8L48 28l-6.5 4.5L44 42l-8-4.2L28 42l2.5-9.5L24 28l8.5-2z'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23c46b7e' stroke-opacity='0.10' stroke-width='1' d='M24 2L46 24 24 46 2 24zM24 12L36 24 24 36 12 24z'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* ═══ Base ═══ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  overflow-x: hidden;
}

/* خلفية رقّ إسلامية */
body.arabic-platform {
  position: relative;
  background:
    radial-gradient(ellipse 100% 70% at 50% -15%, var(--page-glow-1), transparent 58%),
    radial-gradient(ellipse 60% 45% at 100% 10%, var(--page-glow-2), transparent 50%),
    var(--grad-parchment);
}

body.arabic-platform::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--ornament-tile);
  background-size: 48px 48px;
  opacity: 0.85;
  mask-image: radial-gradient(ellipse 130% 90% at 50% 0%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 130% 90% at 50% 0%, #000 8%, transparent 72%);
}

body.arabic-platform::after { content: none; display: none; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
  color: var(--text-strong);
}

a { color: var(--primary); text-decoration: none; }

::selection { background: var(--brand-700); color: #fbf6ee; }

.platform-logo__img--light { display: block; }
.platform-logo__img--dark { display: none; }
html[data-theme="dark"] .platform-logo__img--light { display: none; }
html[data-theme="dark"] .platform-logo__img--dark { display: block; }

/* فاصل زخرفي إسلامي */
.ar-ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--gold-500);
  margin: 8px 0 24px;
}
.ar-ornament-divider::before,
.ar-ornament-divider::after {
  content: "";
  height: 2px;
  flex: 1;
  max-width: 140px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}
.ar-ornament-divider__star {
  font-size: 14px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-border);
  transform: rotate(45deg);
  background: var(--surface-highlight);
}
.ar-ornament-divider__star span {
  display: block;
  transform: rotate(-45deg);
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}