/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/themes.css
   Session: J-33 (hotfix) — Original from J-05
   LastModified: 2026-05-22
   📝 J-33: ربط متغيّرات Bootstrap (--bs-*) بمتغيّرات الثيم
           لإصلاح تباين text-muted في الوضع الليلي + كل الصفحات.
   Module: Theme System (4 themes × Day/Night)
   ============================================================
   ملف الثيمات المركزي. كل المتغيرات تُعرَّف هنا.
   تُستخدم عبر CSS Variables في site.css والـ Components.

   المرجع: 05_UI_UX_Design.md § 2-3
   ============================================================ */

/* ===== Default = Fresh ===== */
:root {
    /* ── Primary Palette ── */
    --p:        #1f6b3a;
    --p-dark:   #154d29;
    --p-light:  #e8f5ee;
    --p-mid:    #2e9955;

    /* ── Accent ── */
    --accent:   #FF8C42;
    --accent-d: #e67a35;
    --sec:      #2b6cb0;

    /* ── Surfaces (Day) ── */
    --sb-bg:    var(--p);
    --sb-bdr:   var(--p-mid);
    --tb-bg:    #ffffff;
    --tb-bdr:   #e5e7eb;
    --body-bg:  #f4f5f7;
    --card-bg:  #ffffff;
    --card-bdr: #e8e8e8;
    --input-bdr: #b9c2cc;   /* J-36c: حدّ حقول أوضح (كان card-bdr باهتاً) */
    --input-bg:  #fdfdfe;   /* خلفية حقل خفيفة للتمييز */

    /* ── Text (Day) ── */
    --t1: #0f172a;
    --t2: #475569;
    --t3: #94a3b8;

    /* ── Scrollbar ── */
    --scroll-thumb: var(--p);
    --scroll-track: rgba(255, 255, 255, .15);

    /* ── Status Colors ── */
    --ok:   #22c55e;
    --warn: #f59e0b;
    --err:  #ef4444;
    --info: #3b82f6;

    /* ── Layout ── */
    --sw-slim: 68px;
    --sw-full: 256px;
    --sw: var(--sw-slim);
    --th: 60px;

    /* ── Transitions ── */
    --tr: .2s cubic-bezier(.4, 0, .2, 1);

    /* ── Type Scale ── */
    --fs-display: 48px;
    --fs-h1:      28px;
    --fs-h2:      24px;
    --fs-h3:      20px;
    --fs-body:    14px;
    --fs-small:   12px;
    --fs-tiny:    10px;
}

/* ============================================================
   🆕 J-33: جسر بين متغيّرات Bootstrap ومتغيّرات الثيم
   ------------------------------------------------------------
   Bootstrap يستخدم --bs-* بقيم ثابتة لا تتبع الوضع الليلي، فكان
   text-muted / text-secondary / الحدود تفقد التباين في الـ dark.
   نربطها هنا بمتغيّرات الثيم (--t1/--t2/--t3/--card-*) فتتبدّل
   تلقائياً مع الوضع — يطبَّق على كل الصفحات الحالية والمستقبلية.
   ============================================================ */
:root,
.dark {
    /* النصوص */
    --bs-body-color:        var(--t1);
    --bs-secondary-color:   var(--t2);   /* ← text-muted / text-secondary */
    --bs-tertiary-color:    var(--t3);
    --bs-emphasis-color:    var(--t1);
    --bs-heading-color:     var(--t1);

    /* الخلفيات */
    --bs-body-bg:           var(--body-bg);
    --bs-secondary-bg:      var(--card-bg);
    --bs-tertiary-bg:       var(--card-bg);

    /* الحدود */
    --bs-border-color:              var(--card-bdr);
    --bs-border-color-translucent:  var(--card-bdr);

    /* الروابط */
    --bs-link-color:        var(--p);
    --bs-link-hover-color:  var(--p-dark);
}

/* عناصر Bootstrap الشائعة التي تربط لونها بـ --bs-secondary-color */
.text-muted,
.text-secondary {
    color: var(--t2) !important;
}

/* ===== Theme: Fresh (explicit class — same as :root) ===== */
.t-fresh {
    --p:        #1f6b3a;
    --p-dark:   #154d29;
    --p-light:  #e8f5ee;
    --p-mid:    #2e9955;
    --accent:   #FF8C42;
    --accent-d: #e67a35;
    --sec:      #2b6cb0;
    --sb-bg:    #1f6b3a;
    --sb-bdr:   #2e9955;
    --scroll-thumb: #1f6b3a;
}

/* ===== Theme: Official (Deep Navy + Teal) ===== */
.t-official {
    --p:        #00306e;
    --p-dark:   #002255;
    --p-light:  #e4edf8;
    --p-mid:    #1252a3;
    --accent:   #3bbdb1;
    --accent-d: #2fa39a;
    --sec:      #0a7cd3;
    --sb-bg:    #00306e;
    --sb-bdr:   #1252a3;
    --scroll-thumb: #00306e;
}

/* ===== Theme: Luxury (Charcoal + Pure Gold) ===== */
.t-luxury {
    --p:        #96793a;
    --p-dark:   #7a6130;
    --p-light:  #faf5e9;
    --p-mid:    #c5a55a;
    --accent:   #c5a55a;
    --accent-d: #a88840;
    --sec:      #b8962e;
    --sb-bg:    #96793a;
    --sb-bdr:   #c5a55a;
    --scroll-thumb: #c5a55a;
}

/* ===== Theme: Fast (Red + Orange) ===== */
.t-fast {
    --p:        #c62828;
    --p-dark:   #b71c1c;
    --p-light:  #fdecea;
    --p-mid:    #e53935;
    --accent:   #FF9800;
    --accent-d: #f57c00;
    --sec:      #e53935;
    --sb-bg:    #c62828;
    --sb-bdr:   #e53935;
    --scroll-thumb: #c62828;
}

/* ============================================================
   Dark Mode Overlay — يُطبَّق عبر body.dark على أي ثيم
   ============================================================ */
.dark {
    --sb-bg:    #0f172a;
    --sb-bdr:   #1e293b;
    --tb-bg:    #0f172a;
    --tb-bdr:   #1e293b;
    --body-bg:  #0c1522;
    --card-bg:  #152033;
    --card-bdr: #1e293b;
    --input-bdr: #3d4d63;   /* J-36c: حدّ حقول أوضح (داكن) */
    --input-bg:  #1a2638;   /* خلفية حقل داكن */

    --t1: #f1f5f9;
    --t2: #94a3b8;
    --t3: #475569;

    --ok:   #4ade80;
    --warn: #fbbf24;
    --err:  #f87171;
    --info: #60a5fa;

    --scroll-track: rgba(255, 255, 255, .08);
}

/* ============================================================
   Reduced Motion — احترام تفضيلات المستخدم
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tr: 0s;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}