/* tokens.css — متغيرات نظام التصميم (داكن/فاتح) + المتغيرات الآمنة */

/* ── index.html 129–213 ── */
/* ==================== متغيرات نظام التصميم الموحد (Design System Tokens — الوضع الداكن) ==================== */
:root {
  /* Design Tokens: Typography */
  --font-ui: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-num: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --font-quran: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  /* Design Tokens: Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Design Tokens: Border Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Design Tokens: Elevation & Shadows — ظلال محيطية هادئة، بلا توهج */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.18), 0 14px 32px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.22), 0 24px 48px rgba(0, 0, 0, 0.34);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* ===== مادة الزجاج السائل (Liquid Glass Material) ===== */
  --glass-blur: blur(24px) saturate(180%);
  --glass-bg: rgba(16, 38, 46, 0.62);
  --glass-bg-strong: rgba(12, 31, 38, 0.78);
  --glass-border: 1px solid rgba(255, 255, 255, 0.16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  /* ===== الهوية اللونية: أوبسيديان زمردي ليلي + لمسات نعناع-ذهبي ===== */
  --bg: #07161B;            /* أوبسيديان عميق يميل للزمردي */
  --surface: #0C1F26;       /* سطح زمردي داكن هادئ */
  --surface-2: #123039;     /* سطح أفتح للتباين */
  --accent: #4fd1a5;        /* نعناعي زمردي - للعناصر الصغيرة على الخلفيات الداكنة */
  --accent-deep: #12805e;   /* زمردي عميق - للخلفيات والأزرار (مع نص كريمي) */
  --accent-2: #8fc9b0;      /* نعناعي رمادي - لون ثانوي هادئ */
  --accent-dim: rgba(79, 209, 165, 0.13);
  --accent-grad: linear-gradient(135deg, #148266, #0e5e63);
  --header-grad: #07161B;   /* شريط علوي مصمت يطابق الخلفية تماماً */
  --text: #eef2ec;          /* أبيض دافئ */
  --text-dim: #93a8a4;      /* رمادي ناعم مائل للأخضر */
  --success: #4fd1a5;
  --border: rgba(255, 255, 255, 0.10);
  --gold: #d9c28a;          /* ذهبي ناعم مطفأ */
  --gold-soft: rgba(217, 194, 138, 0.24);
  --gold-dim: rgba(217, 194, 138, 0.09);
  --islamic-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%233ecf9e' stroke-width='0.6' stroke-opacity='0.055'%3E%3Cpath d='M32 4 L40 24 L60 32 L40 40 L32 60 L24 40 L4 32 L24 24 Z'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6' stroke='%23d4af37' stroke-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
  /* ===== أسماء دلالية للألوان (لتسهيل التغيير المستقبلي) ===== */
  --color-success: var(--success);
  --color-on-accent: #f4f1e8;   /* نص فوق الأزرار الملوّنة */
  --color-on-accent-soft: rgba(244, 241, 232, 0.85);
  --radius: 14px;
  --app-h: 100dvh;
  /* ===== نظام الخطوط: حجم أساسي واحد × نسبة تكبير واحدة ===== */
  --font-base: 26px;                        /* الحجم المرجعي (متوسط) */
  --font-scale: 1;                          /* نسبة التكبير: ٠.٨ / ١ / ١.٣ / ١.٥ / ٢ */
  --font-size: calc(var(--font-base) * var(--font-scale));  /* الحجم الفعلي المشتق */
  --line-height: 2.3;
  /* ===== نظام المصحف: حجم مستقل عن حجم الواجهة ===== */
  --mushaf-base: 22px;                      /* حجم نص المصحف المتناسق مع صفحة الـ15 سطراً */
  --mushaf-scale: 1;                        /* نسبة تكبير مستقلة */
  --mushaf-size: calc(var(--mushaf-base) * var(--mushaf-scale));
  --mushaf-lh: 1.78;                        /* ارتفاع سطر متوازن يمنع الفراغات والاسكرول */
  --header-h: 60px;

  /* ===== هندسة شريط التنقل السفلي (Apple iOS Liquid Glass Capsule) ===== */
  --nav-h: 56px;
  --nav-gap: 6px;
  --nav-drop: 0px;
  /* يتموضع مباشرة فوق شريط الخروج (Home Indicator / Gesture Bar) بدون فراغ ضائع */
  --nav-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.42 + var(--nav-gap)));
  --nav-clearance: calc(var(--nav-h) + var(--nav-bottom) + 14px);
  --nav-clearance-safe: calc(max(var(--nav-h), var(--nav-h-actual, 0px)) + var(--nav-bottom) + 14px);

  /* Calm, Luxurious Premium Motion Tokens
     --ease-premium: المنحنى الأساسي للتفاعلات (تباطؤ سلس)
     --ease-out-expo: دخول الشاشات والعناصر
     --ease-spring: نبضات العدّ الصغيرة فقط (تجاوز خفيف مقصود)
     --ease-spring-snap: استجابة الضغط الفورية — بلا تجاوز */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
  --ease-spring-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration-fast: 160ms;
  --motion-duration: 280ms;
  --bounce-step: 8ms;
}

/* ── index.html 401–448 ── */
/* ==================== الوضع الفاتح الاحترافي (Light Mode) ==================== */
body.theme-light {
  --bg: #F6F4EF;            /* رقّ حريري دافئ — وضع القراءة المريح */
  --surface: #fffdf8;       /* أبيض دافئ */
  --surface-2: #ece8dd;     /* بيج فاتح */
  --accent: #1f7a5a;        /* زمردي عميق للنصوص على الخلفيات الفاتحة */
  --accent-deep: #1f7a5a;
  --accent-2: #3e7d74;      /* فيروزي عميق هادئ */
  --accent-dim: rgba(31, 122, 90, 0.11);
  --accent-grad: linear-gradient(135deg, #1f7a5a, #17635b);
  --header-grad: #F6F4EF;
  --text: #1c2b29;          /* حبر داكن مخضرّ للقراءة الطويلة */
  --text-dim: #5f7472;      /* رمادي ناعم */
  --success: #2e8b57;
  --border: rgba(28, 43, 41, 0.12);
  --gold: #9a7418;
  --gold-soft: rgba(154, 116, 24, 0.22);
  --gold-dim: rgba(154, 116, 24, 0.07);
  /* مادة الزجاج (فاتح) */
  --glass-bg: rgba(255, 253, 248, 0.66);
  --glass-bg-strong: rgba(255, 253, 248, 0.82);
  --islamic-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231f7a5a' stroke-width='0.6' stroke-opacity='0.045'%3E%3Cpath d='M32 4 L40 24 L60 32 L40 40 L32 60 L24 40 L4 32 L24 24 Z'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6' stroke='%239a7418' stroke-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");
  /* أسماء دلالية (الوضع الفاتح) */
  --color-success: var(--success);
  --color-on-accent: #ffffff;
  --color-on-accent-soft: rgba(255, 255, 255, 0.9);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; height: var(--app-h, 100dvh); max-height: var(--app-h, 100dvh); background: var(--bg); color: var(--text); font-family: var(--font-ui); direction: rtl; overflow: hidden; overscroll-behavior: none; transition: background 0.4s, color 0.4s; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; }
.dua-text, .occasion-sunnah-item, #custom-dialog-text, .tafsir-sheet-body, .tafsir-sheet-ayah { user-select: text; -webkit-user-select: text; }
.mushaf-page, .mushaf-block, .ayah, .w { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* إضاءة محيطية واحدة هادئة خلف المحتوى — بلا بقع ألوان متعددة */
body::before {
  content: ''; position: fixed; inset: 0; opacity: 0.045; pointer-events: none; z-index: 0; transition: opacity 0.4s;
  background-image: radial-gradient(circle at 50% -10%, var(--accent) 0, transparent 46%);
}
body.theme-light::before { opacity: 0.035; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(62, 207, 158, 0.3); border-radius: 10px; }
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(31, 122, 90, 0.25); }

#app { position: fixed; inset: 0; width: 100%; height: 100%; height: var(--app-h, 100dvh); max-height: var(--app-h, 100dvh); display: flex; flex-direction: column; z-index: 1; }