/* =============================================================================
 *  themes.css — نظام التصميم التراثي: اللوحتان اللونيتان ووحدات الزخرفة
 * -----------------------------------------------------------------------------
 *  النمطان (heritage / union) يتشاركان نفس النظام:
 *   • الخطوط الثلاثة: Aref Ruqaa · Amiri · IBM Plex Sans Arabic
 *   • وحدات زخرفية SVG مضمّنة تتكرّر كخلفيات (سدّادو · معينات · زكزاك · مثلثات · نجوم جص)
 *   • إطارات مزدوجة بالذهب المعتّق، وتناوب بين الورق والرمل والأخضر والبني
 *  كل لون يأتي من هذه المتغيّرات — لا ألوان ثابتة في base.css.
 * ============================================================================= */

/* ---------- ١) وحدات الزخرفة — قوالب SVG حقيقية تُرسم بـ background-image ---------- */
:root {
  /* السدّادو الجانبي 46×92: أرضية حمراء، حافتان داكنتان، معينات متداخلة، تقاطعات ونقاط */
  --sadu-side: url("/assets/img/ornaments/sadu-side.svg");

  /* شريط السدّادو الأفقي 80×40: خطوط كريمية، معين كبير، تقاطع X، معين صغير */
  --sadu-h: url("/assets/img/ornaments/sadu-h.svg");

  /* التقاطعات 64×40: خطان كريميان متقاطعان بإطار داكن */
  --sadu-cross: url("/assets/img/ornaments/sadu-cross.svg");

  /* المعينات 44×34: مستطيل كريمي ومعينات حمراء وكريمية وداكنة */
  --sadu-diamond: url("/assets/img/ornaments/sadu-diamond.svg");

  /* الزكزاك 26×18: خط ذهبي متعرّج وخط أحمر مساعد */
  --zigzag: url("/assets/img/ornaments/zigzag.svg");

  /* المثلثات 28×22: مثلث ذهبي ومثلث أحمر، داخلهما مثلثات كريمية */
  --triangles: url("/assets/img/ornaments/triangles.svg");

  /* الخطوط الرأسية 22×22: أعمدة حمراء وداكنة وذهبية فوق الكريم */
  --sadu-v: url("/assets/img/ornaments/sadu-v.svg");

  /* النقاط 9×9 */
  --dots: url("/assets/img/ornaments/dots.svg");

  /* أقواس الجص 96×64: قوسان مدبّبان، داخلهما نجوم هندسية */
  --gypsum-arch: url("/assets/img/ornaments/gypsum-arch.svg");

  /* نجوم الجص 56×56: مربعان متداخلان، أحدهما مدوّر 45 درجة */
  --gypsum-star: url("/assets/img/ornaments/gypsum-star.svg");

  /* شمسية إسلامية مجنزلة — Openclipart 84547، رخصة CC0.
     سوداء خالصة، فتُلوَّن بـ background-color مع أي نمط. */
  --rosette: url("/assets/img/ornaments/rosette.svg");

  /* زخرفة المعينات تحت العناوين — المجموعة الذهبية (مملوءة ومفرّغة) */
  --title-diamonds: url("/assets/img/ornaments/title-diamonds.svg");

  /* خامات الصفحة — كلها من ambientCG برخصة CC0 (بلا نسب إلزامي) */
  --tex-plaster-old: url("/assets/img/textures/Plaster007.jpg");    /* جص قديم متشقق */
  --tex-plaster-white: url("/assets/img/textures/Plaster001.jpg"); /* جص أبيض ناعم */
  --tex-paper-creased: url("/assets/img/textures/Paper003.jpg");   /* ورق مجعّد */
  --tex-paper-beige: url("/assets/img/textures/Paper006.jpg");     /* ورق بيج */

  /* يختاره العميل من الإعدادات — يُمنع أي رابط خارجي حمايةً للخصوصية */
  --page-tex: none;
  --page-tex-opacity: .1;
}

/* ---------- ٢) النمط التراثي ---------- */
:root,
[data-theme='heritage'] {
  /* ألوان */
  --bg: #f7f1e2;            /* الخلفية الكريمية */
  --bg-alt: #ecdfc4;        /* الرمل */
  --surface: #fdfaf2;       /* ورق البطاقات والنوافذ */
  --surface-2: #f4ecdc;
  --text: #241a10;          /* النص الأساسي */
  --muted: #8d7f68;         /* النص الثانوي */
  --brand: #8f3027;         /* الأحمر التراثي */
  --brand-2: #b2452f;       /* أعلى التدرج */
  --brand-3: #d4704f;       /* الأحمر الفاتح المساعد */
  --accent: #b3813d;        /* الذهب المعتّق */
  --accent-2: #d2a24f;      /* الذهب الأوضح */
  --accent-3: #e8c98a;      /* الذهب الفاتح */
  --accent-4: #f4e2bb;      /* الذهب الكريمي */
  --stone: #38291a;         /* بني حجري */
  --bark: #4a3826;          /* بني خشبي */
  --sand: #e6d8bc;
  --line: #e4d8bd;          /* حدود خفيفة */
  --line-2: #cdb98f;        /* حدود أوضح */
  --ring: rgba(179, 129, 61, 0.55);
  --on-brand: #f4e2bb;
  --tree-line: #b99b62;      /* خطوط الشجرة */
  --gypsum: #a98550;         /* نقوش الجص */

  /* ظلال — الفخامة تأتي من الظلال لا من الخامة المعدنية المصوّرة */
  --shadow-sm: 0 2px 10px rgba(36, 26, 16, 0.08);
  --shadow: 0 14px 38px rgba(36, 26, 16, 0.12);
  --shadow-lg: 0 26px 70px rgba(20, 13, 6, 0.4);

  /* حواف صغيرة */
  --radius: 3px;
  --radius-sm: 3px;
  --border-w: 1px;

  /* الخطوط الثلاثة */
  --font-head: 'Aref Ruqaa', 'Amiri', serif;
  --font-display: 'Amiri', serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --head-track: normal;

  /* الواجهة */
  --hero-fg: #fdf5e4;
  --hero-overlay:
    linear-gradient(270deg, rgba(20, 13, 6, 0.97), rgba(22, 16, 12, 0.96) 24%,
      rgba(31, 22, 14, 0.88) 36%, rgba(34, 25, 16, 0.68) 50%,
      rgba(36, 27, 18, 0.34) 66%, rgba(36, 27, 18, 0.1)),
    linear-gradient(0deg, rgba(26, 18, 10, 0.62), transparent 42%);
  /* لا نمط على طبقة الخلفية — صورة الغلاف وحدها.
     نقش التقاطعات يوضع فوق الصورة عبر .hero::before في heritage.css */
  --hero-pattern: none;
  --hero-cross: var(--sadu-cross);
  --card-edge: var(--line-2);
  --glass: rgba(253, 250, 242, 0.95);

  /* الأقسام ذات الخلفيات الخاصة */
  --ach-bg: linear-gradient(180deg, #2f7350, #1e4d35 55%, #143828);
  --ach-fg: #f2ece0;
  --dark-bg: linear-gradient(180deg, #2b2013, #241a10);
  --dark-fg: #e6d9c0;
}

/* ---------- ٣) النمط الاتحادي — نفس النظام بتمييز أخضر ---------- */
[data-theme='union'] {
  --brand: #2f6b47;
  --brand-2: #3f8256;
  --brand-3: #4f9a6a;
  --accent: #b3813d;          /* الذهب يبقى — الهوية تراثية */
  --accent-2: #d2a24f;
  --accent-3: #e8c98a;
  --ring: rgba(47, 107, 71, 0.55);
  --edge: #1e4a30;            /* حدود العناصر النشطة */
  --border-w: 1px;
  /* نقوش السدّادو تبقى بالأحمر — هوية تراثية لا تتغيّر بالنمط */
}

/* ---------- ٤) ما يميّز النمط الاتحادي: العناصر النشطة خضراء ---------- */
[data-theme='union'] .btn-solid,
[data-theme='union'] .nav a.active,
[data-theme='union'] .hero-btn {
  background-image: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-color: var(--edge);
}
[data-theme='union'] .hero-title { color: #fdf5e4; }