/* ══════════════════════════════════════════════════════════
   theme.css — کنترل مرکزی ظاهر کل سایت (رنگ‌ها + فونت)
   برای تغییر رنگ‌بندی یا فونت کل سایت، فقط همین فایل رو ویرایش کن.
   ══════════════════════════════════════════════════════════ */

/* ── فونت‌های محلی (self-hosted) — از پوشه‌ی fonts/ خوانده می‌شن ──
   Tanha    : فونت اصلی متن (خوانا، هندسی، تمیز) — روی کل سایت
   MjParand : فونت تیترها و عنوان‌ها (خاص‌تر، برای جلوه بصری) — h1/h2/h3
   Dima Shekasteh : نستعلیق — فقط با کلاس .font-nastaliq روی متن‌های خاص/عربی */

@font-face {
    font-family: 'Tanha';
    src: url('fonts/Tanha.woff2') format('woff2'),
         url('fonts/Tanha.woff')  format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MjParand';
    src: url('fonts/MjParand.woff') format('woff'),
         url('fonts/MjParand.ttf')  format('truetype');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Dima Shekasteh';
    src: url('fonts/DimaShekasteh.woff') format('woff'),
         url('fonts/DimaShekasteh.ttf')  format('truetype');
    font-weight: normal;
    font-display: swap;
}

:root {
    --font-body:     'Tanha', 'Vazirmatn', Tahoma, sans-serif;
    --font-heading:  'MjParand', 'Tanha', Tahoma, sans-serif;
    --font-nastaliq: 'Dima Shekasteh', serif;
}

/* ── تم عزاداری (پیش‌فرض) — خاکستری-مشکی مدرن، مثل تم تیره‌ی اندروید ── */
:root,
:root[data-theme="mourning"] {
    --bg:            #121214;
    --bg-elevated:   #1a1a1d;
    --bg-card:       rgba(30, 30, 34, 0.88);
    --bg-card-soft:  rgba(255, 255, 255, 0.05);
    --header-bg:     #1c1c26;
    --nav-bg:        #1a1a24;
    --nav-border:    #26263a;

    --accent:        #d51a1a;
    --accent-rgb:    213, 26, 26;
    --accent-soft:   rgba(213, 26, 26, 0.15);
    --accent-border: rgba(213, 26, 26, 0.4);

    --gold:          #ffd76a;
    --gold-rgb:      255, 215, 106;
    --gold-soft:     rgba(255, 215, 106, 0.15);

    --text:          #f2f2f4;
    --text-dim:      #a8a8b0;
    --text-dimmer:   #7a7a82;
    --border:        rgba(255, 255, 255, 0.09);

    --success:       #6bffb0;
    --danger:        #ff6b6b;
    --info:          #38bdf8;

    --brand-color:   var(--accent);
}

/* ── تم عید نوروز (فیروزه‌ای + طلایی، همون خاکستری تیره پایه) ── */
:root[data-theme="eid"] {
    --bg:            #10161a;
    --bg-elevated:   #171f24;
    --bg-card:       rgba(24, 34, 33, 0.88);
    --bg-card-soft:  rgba(255, 255, 255, 0.05);
    --header-bg:     #16211f;
    --nav-bg:        #141f1d;
    --nav-border:    #21332f;

    --accent:        #17baa8;
    --accent-rgb:    23, 186, 168;
    --accent-soft:   rgba(23, 186, 168, 0.15);
    --accent-border: rgba(23, 186, 168, 0.4);

    --gold:          #f4c95d;
    --gold-rgb:      244, 201, 93;
    --gold-soft:     rgba(244, 201, 93, 0.15);

    --text:          #f2f4f4;
    --text-dim:      #a4bcb8;
    --text-dimmer:   #75908c;
    --border:        rgba(255, 255, 255, 0.09);

    --success:       #6bffb0;
    --danger:        #ff8080;
    --info:          #38bdf8;

    --brand-color:   #22c55e;
}

/* ── فونت یکدست، جوان‌پسند و خواناتر برای کل سایت ── */
html[data-theme] body,
html[data-theme] * {
    font-family: var(--font-body) !important;
}
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 {
    font-family: var(--font-heading) !important;
}
.font-nastaliq {
    font-family: var(--font-nastaliq) !important;
    line-height: 2.1 !important;
}

/* ── یه عمق ظریف به پس‌زمینه (مثل وینیت ملایم تم‌های تیره‌ی مدرن)، بدون افت کارایی چون فقط یه گرادیان ثابته ── */
html[data-theme] body {
    background-image:
        radial-gradient(ellipse 800px 500px at 50% -10%, rgba(var(--accent-rgb), 0.07), transparent 60%),
        radial-gradient(ellipse 600px 400px at 100% 100%, rgba(var(--gold-rgb), 0.04), transparent 60%);
    background-attachment: fixed;
    background-color: var(--bg);
}

/* ── انتقال نرم بین دو تم ── */
html[data-theme] body,
html[data-theme] body * {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.25s ease;
}

/* ── انیمیشن ورود عمومی (قابل استفاده در هر صفحه با کلاس theme-fade-in) ── */
@keyframes themeFadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.theme-fade-in {
    opacity: 0;
    animation: themeFadeInUp 0.5s ease forwards;
}
.theme-fade-in.d1 { animation-delay: 0.05s; }
.theme-fade-in.d2 { animation-delay: 0.1s; }
.theme-fade-in.d3 { animation-delay: 0.15s; }
.theme-fade-in.d4 { animation-delay: 0.2s; }
.theme-fade-in.d5 { animation-delay: 0.25s; }

/* ── کارت‌های بالاتر (مودال، پنل‌های شناور) — یه لایه روشن‌تر از بک‌گراند اصلی ── */
.theme-elevated { background: var(--bg-elevated) !important; }