:root {
    color-scheme: light;

    --nahj-font-sans: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --nahj-font-ar: var(--nahj-font-sans);
    --nahj-font-latin: var(--nahj-font-sans);

    --nahj-brand-950: #0b1838;
    --nahj-brand-900: #10234f;
    --nahj-brand-800: #17356f;
    --nahj-brand-700: #1f4a96;
    --nahj-brand-600: #2563eb;
    --nahj-brand-500: #3b82f6;
    --nahj-brand-400: #60a5fa;
    --nahj-brand-300: #93c5fd;
    --nahj-brand-200: #bfdbfe;
    --nahj-brand-100: #dbeafe;
    --nahj-brand-50: #eff6ff;

    /* Alemam Academy identity: shared by branded heroes and premium accents. */
    --nahj-academy-ink: #062d35;
    --nahj-academy-teal-deep: #073d46;
    --nahj-academy-teal: #0a5963;
    --nahj-academy-gold: #d9a83e;
    --nahj-learning-canvas: #f6faf8;
    --nahj-learning-surface: #edf6f2;
    --nahj-learning-border: #d5e7df;
    --nahj-learning-muted: #527078;

    --nahj-violet-700: #6d28d9;
    --nahj-violet-600: #7c3aed;
    --nahj-violet-500: #8b5cf6;
    --nahj-violet-100: #ede9fe;
    --nahj-violet-50: #f5f3ff;

    --nahj-emerald-700: #047857;
    --nahj-emerald-600: #059669;
    --nahj-emerald-500: #10b981;
    --nahj-emerald-100: #d1fae5;
    --nahj-emerald-50: #ecfdf5;

    --nahj-amber-700: #b45309;
    --nahj-amber-600: #d97706;
    --nahj-amber-500: #f59e0b;
    --nahj-amber-100: #fef3c7;
    --nahj-amber-50: #fffbeb;

    --nahj-rose-700: #be123c;
    --nahj-rose-600: #e11d48;
    --nahj-rose-500: #f43f5e;
    --nahj-rose-100: #ffe4e6;
    --nahj-rose-50: #fff1f2;

    --nahj-cyan-700: #0e7490;
    --nahj-cyan-600: #0891b2;
    --nahj-cyan-100: #cffafe;
    --nahj-cyan-50: #ecfeff;

    --nahj-slate-950: #020617;
    --nahj-slate-900: #0f172a;
    --nahj-slate-800: #1e293b;
    --nahj-slate-700: #334155;
    --nahj-slate-600: #475569;
    --nahj-slate-500: #64748b;
    --nahj-slate-400: #94a3b8;
    --nahj-slate-300: #cbd5e1;
    --nahj-slate-200: #e2e8f0;
    --nahj-slate-100: #f1f5f9;
    --nahj-slate-50: #f8fafc;

    --nahj-page: #f4f7fb;
    --nahj-page-strong: #eef3fa;
    --nahj-surface: #ffffff;
    --nahj-surface-soft: #f8fafc;
    --nahj-surface-muted: #f1f5f9;
    --nahj-surface-glass: rgba(255, 255, 255, .86);
    --nahj-text: #0f172a;
    --nahj-text-soft: #334155;
    --nahj-muted: #64748b;
    --nahj-subtle: #94a3b8;
    --nahj-border: #e2e8f0;
    --nahj-border-strong: #cbd5e1;

    --nahj-space-1: 4px;
    --nahj-space-2: 8px;
    --nahj-space-3: 12px;
    --nahj-space-4: 16px;
    --nahj-space-5: 20px;
    --nahj-space-6: 24px;
    --nahj-space-8: 32px;
    --nahj-space-10: 40px;
    --nahj-space-12: 48px;

    --nahj-radius-xs: 6px;
    --nahj-radius-sm: 8px;
    --nahj-radius-md: 12px;
    --nahj-radius-lg: 16px;
    --nahj-radius-xl: 22px;
    --nahj-radius-2xl: 30px;

    --nahj-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --nahj-shadow-sm: 0 4px 14px rgba(15, 23, 42, .055);
    --nahj-shadow-md: 0 12px 30px rgba(15, 23, 42, .08);
    --nahj-shadow-lg: 0 24px 64px rgba(15, 23, 42, .14);

    --nahj-topbar-height: 68px;
    --nahj-sidebar-width: 286px;
    --nahj-content-max: 1680px;

    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: #059669;
    --bs-success-rgb: 5, 150, 105;
    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: #e11d48;
    --bs-danger-rgb: 225, 29, 72;
    --bs-info: #0891b2;
    --bs-info-rgb: 8, 145, 178;
    --bs-body-font-family: var(--nahj-font-ar);
    --bs-body-color: var(--nahj-text);
    --bs-body-bg: var(--nahj-page);
    --bs-border-color: var(--nahj-border);
    --bs-border-radius: var(--nahj-radius-sm);
    --bs-border-radius-lg: var(--nahj-radius-md);
    --bs-border-radius-xl: var(--nahj-radius-lg);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    min-height: 100%;
    direction: rtl;
    background: var(--nahj-page);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    direction: rtl;
    text-align: right;
    font-family: var(--nahj-font-ar);
    color: var(--nahj-text);
    background:
        radial-gradient(circle at 84% -8%, rgba(59, 130, 246, .09), transparent 31rem),
        radial-gradient(circle at 16% 10%, rgba(139, 92, 246, .06), transparent 28rem),
        var(--nahj-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
    font-family: var(--nahj-font-latin);
}

::selection {
    color: var(--nahj-brand-950);
    background: var(--nahj-brand-200);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--nahj-brand-700); }

button, input, select, textarea { font: inherit; }

:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .25);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nahj-text);
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.015em;
}

p { line-height: 1.75; }

.text-muted { color: var(--nahj-muted) !important; }

.nahj-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#blazor-error-ui {
    position: fixed;
    inset-inline: 18px;
    inset-block-end: 18px;
    z-index: 10000;
    display: none;
    padding: 14px 18px;
    color: #881337;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    box-shadow: var(--nahj-shadow-lg);
}

/* Legacy rich-text font classes → self-hosted bilingual stack */
.ql-font-Cairo,
.ql-font-Tajawal {
    font-family: var(--nahj-font-sans);
}