/* التحبير — المتغيرات والأساسيات. الألوان من تطبيق Replit (SPEC.md). */
:root {
  --bg: #F3F5F1; --card: #FAFBF8; --text: #17232B; --primary: #153B55; --primary-dark: #102F45;
  --secondary: #E6EEEC; --accent: #AECFD0; --danger: #B7493F; --border: #D8E3E3; --muted: #45555C;
  --on-primary: #fff; --ok: #2F7D5B; --warn: #B7791F; --ok-bg: #E2F1E9; --warn-bg: #F7EBD2; --danger-bg: #F5E1DE; --info-bg: #E1EEF1;
  --field-bg: #fff; --shadow: 0 1px 2px rgba(16,47,69,.05), 0 6px 18px -8px rgba(16,47,69,.14);
  --shadow-lg: 0 24px 60px -18px rgba(16,47,69,.35);
  --radius: 14px; --radius-sm: 10px;
  --side-w: 288px; --top-h: 68px;
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-head: "Amiri", "IBM Plex Sans Arabic", "Traditional Arabic", serif;
  --font-en: "Inter", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121D23; --card: #1A2A34; --text: #E6EEF0; --primary: #AECFD0; --primary-dark: #8DB9BB;
  --secondary: #223743; --accent: #AECFD0; --danger: #E2877E; --border: #334C5A; --muted: #9DB1B8;
  --on-primary: #0E2230; --ok: #6CC49D; --warn: #E3B35E; --ok-bg: #1B3A30; --warn-bg: #3B3320; --danger-bg: #3E2623; --info-bg: #1F3744;
  --field-bg: #14222B; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121D23; --card: #1A2A34; --text: #E6EEF0; --primary: #AECFD0; --primary-dark: #8DB9BB;
    --secondary: #223743; --accent: #AECFD0; --danger: #E2877E; --border: #334C5A; --muted: #9DB1B8;
    --on-primary: #0E2230; --ok: #6CC49D; --warn: #E3B35E; --ok-bg: #1B3A30; --warn-bg: #3B3320; --danger-bg: #3E2623; --info-bg: #1F3744;
    --field-bg: #14222B; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ar);
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[lang="en"] body { font-family: var(--font-en); line-height: 1.55; }
html[lang="en"] h1, html[lang="en"] h2 { font-family: var(--font-en); letter-spacing: -.01em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; color: var(--text); }
h1, h2 { font-family: var(--font-head); font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
h2 { font-size: 1.5rem; } h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--primary); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:root[data-theme="light"] :focus-visible { outline-color: var(--primary); }
::selection { background: var(--accent); color: #102F45; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }