/* =============================================================
   MinerCore — Typography System (Calm & Unified)
   ─────────────────────────────────────────────────────────────
   Design Philosophy: هادئ · خفيف · مريح للنظر · منسق
   ─────────────────────────────────────────────────────────────
   Weight Rules (site-wide):
   • h1 page titles      → fw-bold     (700)
   • h2 section headings → fw-semibold (600)
   • h3 card headings    → fw-semibold (600)
   • h4 – h6             → fw-medium   (500)
   • Buttons, nav, labels→ fw-semibold (600) max
   • Body text           → fw-regular  (400)
   • fw-extrabold (800)  → HOME HERO TITLE ONLY — nowhere else
   ============================================================= */

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
    color: var(--color-text-main);
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);      /* 700 */
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);  /* 600 — section headings don't need heavy weight */
    letter-spacing: -0.015em;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);  /* 600 */
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--fw-medium);    /* 500 */
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);    /* 500 */
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);    /* 500 */
}

/* ── Body ── */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-body);
}

p {
    margin-bottom: 1rem;
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

/* ── Inline ── */
strong, b {
    font-weight: var(--fw-semibold);  /* 600 — not harsh bold */
    color: var(--color-text-main);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--text-xs);
    font-weight: var(--fw-regular);
    color: var(--color-text-dark);
}

/* ── Blockquote ── */
blockquote {
    border-left: 3px solid var(--color-primary);
    padding: 12px 20px;
    margin: 20px 0;
    background-color: var(--color-primary-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: var(--fw-regular);
}

/* ── Code ── */
code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--color-surface-2);
    color: var(--color-primary-dark);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
}

pre {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-main);
}

/* ── Lists ── */
ul, ol {
    padding-left: 1.25em;
    margin-bottom: 1rem;
}

ul { list-style: disc; }
ol { list-style: decimal; }

li {
    margin-bottom: 0.4em;
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
}

/* ── Divider ── */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 30px 0;
}

/* ── RTL ── */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] blockquote {
    border-left: none;
    border-right: 3px solid var(--color-primary);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 { letter-spacing: 0; }