/* Habhar site: warm paper by day, charcoal by night; pepper red is the only accent. */
:root { --bg:#f7f4ef; --card:#fffdf9; --ink:#1a1817; --mute:#6f6a63; --line:#e7e1d7; --pepper:#d23a3d; --leaf:#5e8f2f;
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg:#111012; --card:#19181b; --ink:#f3efe8; --mute:#a7a199; --line:#2b292d; --pepper:#ef5e5f; --leaf:#93c75b; color-scheme: dark } }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.75 var(--font); padding-inline:16px; padding-block:0 48px }
a { color: var(--pepper) }
.wrap { max-width: 760px; margin: 0 auto }
nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:20px }
nav .brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:20px }
nav .links { display:flex; gap:16px; font-size:14px } nav .links a { color: var(--mute); text-decoration:none }
h1 { font-size: clamp(28px, 6vw, 44px); line-height:1.25; margin: 24px 0 8px; text-wrap: balance }
h2 { font-size: 20px; margin: 32px 0 6px }
p, li { color: var(--ink) } .mute { color: var(--mute) }
.doc { background: var(--card); border:1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin-top: 16px }
.doc ul { padding-inline-start: 20px } .doc li { margin-block: 4px }
footer { margin-top: 40px; color: var(--mute); font-size: 13.5px; display:flex; flex-wrap:wrap; gap: 8px 18px; justify-content: space-between }
footer a { color: var(--mute) }