/* =========================================================
   VORTEX — نظام التصميم (Design System) v1
   المصدر الوحيد للألوان والخطوط والمسافات والأزرار والبطاقات.
   يُحمَّل آخر شيء في كل صفحة (ما عدا القارئ) ليتغلب على الطبقات السابقة.
   ========================================================= */

/* ---------- 1. الرموز (Tokens) ---------- */
:root {
    /* الألوان الأساسية */
    --ds-bg: #05080c;
    --ds-bg-raised: #0a0e13;
    --ds-surface: #0c1217;
    --ds-surface-2: #111820;
    --ds-line: rgba(255, 255, 255, 0.08);
    --ds-line-strong: rgba(255, 255, 255, 0.16);

    /* النص */
    --ds-text: #eef6f9;
    --ds-text-2: #b9c3cc;
    --ds-text-3: #8a96a3;

    /* لون العلامة */
    --ds-accent: #13abd2;
    --ds-accent-hi: #76e5fd;
    --ds-accent-ink: #04151c;   /* النص فوق الخلفية الملوّنة */

    /* حالات */
    --ds-success: #48d59b;
    --ds-warning: #f5c451;
    --ds-danger: #ff8a9b;

    /* الخطوط */
    --ds-font: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    --ds-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

    /* سلم أحجام النص */
    --ds-fs-xs: 12px;
    --ds-fs-sm: 13.5px;
    --ds-fs-md: 15px;
    --ds-fs-lg: 17px;
    --ds-fs-h3: 20px;
    --ds-fs-h2: clamp(24px, 3vw, 30px);
    --ds-fs-h1: clamp(30px, 4.4vw, 48px);

    /* سلم المسافات (4px) */
    --ds-s1: 4px;  --ds-s2: 8px;  --ds-s3: 12px; --ds-s4: 16px;
    --ds-s5: 24px; --ds-s6: 32px; --ds-s7: 48px; --ds-s8: 64px;

    /* الحواف والظلال */
    --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-pill: 999px;
    --ds-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
    --ds-ease: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
    --ds-container: 1200px;
}

/* ---------- 2. الأساس ---------- */
body { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font); font-size: var(--ds-fs-md); line-height: 1.75; }
body[data-page="reader"] { /* القارئ له هويته الخاصة */ }
body:not([data-page="reader"]) .container,
body:not([data-page="reader"]) .db { width: min(var(--ds-container), 100% - 32px); margin-inline: auto; }
:where(p) { color: var(--ds-text-2); }
:focus-visible { outline: 2px solid var(--ds-accent-hi); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. العناوين ---------- */
h1, .ac-head h1, .hub h1 { font-family: var(--ds-font); font-weight: 800; line-height: 1.2; letter-spacing: 0; color: var(--ds-text); }
h1 { font-size: var(--ds-fs-h1); }
h2 { font-size: var(--ds-fs-h2); font-weight: 800; line-height: 1.3; }
h3 { font-size: var(--ds-fs-h3); font-weight: 700; line-height: 1.4; }
h4 { font-size: var(--ds-fs-lg); font-weight: 700; }
.ds-eyebrow { font: 700 var(--ds-fs-xs)/1 var(--ds-font-mono); letter-spacing: .18em; color: var(--ds-accent-hi); text-transform: uppercase; }

/* ---------- 4. الأزرار ---------- */
.ds-btn, .btn, .hub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s2);
    min-height: 44px; padding: 0 var(--ds-s5); border-radius: var(--ds-r-pill);
    font: inherit; font-size: var(--ds-fs-sm); font-weight: 700; text-decoration: none; cursor: pointer;
    border: 1px solid var(--ds-line-strong); background: transparent; color: var(--ds-text);
    transition: background var(--ds-ease), border-color var(--ds-ease), color var(--ds-ease);
}
.ds-btn:hover, .btn:hover, .hub-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent-hi); }
.ds-btn--primary, .btn.primary, .hub-btn.primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-ink); }
.ds-btn--primary:hover, .btn.primary:hover, .hub-btn.primary:hover { background: var(--ds-accent-hi); border-color: var(--ds-accent-hi); color: var(--ds-accent-ink); }
.ds-btn--ghost { border-color: transparent; }
.ds-btn--danger { border-color: rgba(255, 138, 155, .4); color: var(--ds-danger); }
.ds-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 5. البطاقات ---------- */
.ds-card, .hub-stat, .hl-card, .ac-poster {
    border-radius: var(--ds-r-lg); border: 1px solid var(--ds-line);
    background: linear-gradient(160deg, var(--ds-surface-2), var(--ds-bg-raised));
}
.ds-card { padding: var(--ds-s5); }
.ds-card:hover { border-color: var(--ds-line-strong); }

/* ---------- 6. الشارات ---------- */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 700; border: 1px solid var(--ds-line); color: var(--ds-text-2); background: rgba(5, 8, 12, .7); }
.ds-badge--accent { background: var(--ds-accent); border-color: transparent; color: var(--ds-accent-ink); }
.ds-badge--warn { background: var(--ds-warning); border-color: transparent; color: #1b1405; }

/* ---------- 7. الحقول ---------- */
input, select, textarea { font-family: var(--ds-font); }
.ds-field input, .ds-field select, .ds-field textarea {
    width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--ds-r-md);
    border: 1px solid var(--ds-line-strong); background: rgba(255, 255, 255, .04); color: var(--ds-text); font-size: var(--ds-fs-sm);
}
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(19, 171, 210, .16); }

/* ---------- 8. الحالات الفارغة والرسائل ---------- */
.ds-empty { padding: var(--ds-s7) var(--ds-s4); text-align: center; color: var(--ds-text-3); border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-r-lg); }

/* ---------- 9. تنسيقات الجوال ---------- */
@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .ds-btn, .btn, .hub-btn { min-height: 44px; padding: 0 var(--ds-s4); }
    h1 { font-size: 28px; }
}

/* ---------- 10. الحركة المخفّضة ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}