/*
  ملف تعديل الألوان والهوية.
  غيّر الأكواد هنا فقط إذا تبي تبدل شكل الموقع بدون الدخول في ملف styles.css الطويل.

  مثال اللون:
  #f6efe3 = بيج فاتح
  #8fc7ba = أخضر هادئ
  #ca7a48 = برتقالي طيني
*/

:root {
  /* ألوان الصفحة الأساسية */
  --bg: #f6efe3;
  --bg-soft: #fbf8f1;
  --surface: #fffdfa;
  --text: #2b231e;
  --muted: #75685c;
  --muted-2: #9c8d7c;
  --line: rgba(96, 75, 56, 0.14);

  /* ألوان الهوية */
  --teal: #8fc7ba;
  --teal-dark: #4f9084;
  --sage: #cddfcb;
  --mint: #dcefe8;
  --clay: #ca7a48;
  --clay-soft: #d7a184;
  --brown: #5a4735;
  --cream: #f3dfb9;

  /* الظلال والزوايا */
  --shadow: 0 18px 45px rgba(92, 70, 48, 0.12);
  --shadow-soft: 0 10px 30px rgba(92, 70, 48, 0.08);
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  /* ألوان بطاقات المحتوى */
  --card-cream-start: #fff0cf;
  --card-cream-end: #f8dfaa;
  --card-mint-start: #abdacf;
  --card-mint-end: #85c5b9;
  --card-brown-start: #6b5540;
  --card-brown-end: #463624;
  --card-sage-start: #d5e7d2;
  --card-sage-end: #a7cfbb;
  --card-sea-start: #b6e1da;
  --card-sea-end: #83c6bc;

  /* ألوان المتجر والبودكاست */
  --store-start: #fff1cf;
  --store-end: #f8dfaa;
  --podcast-start: #fbf4e6;
  --podcast-end: #efe4d0;
}

.tone-cream {
  background: linear-gradient(145deg, var(--card-cream-start), var(--card-cream-end));
}

.tone-mint {
  background: linear-gradient(145deg, var(--card-mint-start), var(--card-mint-end));
}

.tone-brown {
  background: linear-gradient(145deg, var(--card-brown-start), var(--card-brown-end));
}

.tone-sage {
  background: linear-gradient(145deg, var(--card-sage-start), var(--card-sage-end));
}

.tone-sea {
  background: linear-gradient(145deg, var(--card-sea-start), var(--card-sea-end));
}

.store-card {
  background: linear-gradient(145deg, var(--store-start), var(--store-end));
}

.podcast-card {
  background: linear-gradient(145deg, var(--podcast-start), var(--podcast-end));
}

/* شعار الموقع */
.brand-mark {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand .brand-mark {
  width: 48px;
  height: 48px;
}

/* كروت الأقسام الرئيسية: أذكار / تدبر / كتب */
.category-section {
  margin: 22px auto 0;
}

.category-grid {
  max-width: 820px;
  margin-inline: auto;
  gap: 12px;
}

.category-card {
  min-height: 118px;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 20px;
}

.category-icon {
  width: 44px;
  height: 44px;
}

.category-icon svg {
  width: 26px;
  height: 26px;
}

.category-card h2 {
  font-size: 21px;
}

.category-card p {
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .category-section {
    margin-top: 18px;
  }

  .category-card {
    min-height: 114px;
  }
}

@media (max-width: 560px) {
  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .category-section {
    margin-top: 16px;
  }

  .category-grid {
    gap: 10px;
  }

  .category-card {
    min-height: 108px;
    padding: 14px 10px;
  }
}