@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  color-scheme: only light;
  /* Single project font: Tajawal. */
  --font-primary: "Tajawal", sans-serif;
  --font-arabic: var(--font-primary);
  --font-latin: var(--font-primary);
  --font-ui: var(--font-arabic);
  --content-max-width: 1440px;
  --page: #ffffff;
  --card: #ffffff;
  --panel: #fbfcfe;
  --field: #f8fafc;
  --ink: #17202a;
  --line: #c5ced8;
  --muted: #5d6b78;
  --accent: #f4b942;
  --accent-strong: #d99b24;
  --on-accent: #17120a;
  --danger: #b65353;
  --danger-hover: rgba(182, 83, 83, .1);
  --control-hover: rgba(244, 185, 66, .14);
  --shadow: rgba(0, 0, 0, .18);
}

html {
  scrollbar-gutter: stable;
  overflow-anchor: none;
}

html,
body {
  background: var(--page);
  color: var(--ink);
}

html[lang="en"],
html[dir="ltr"] {
  --font-ui: var(--font-latin);
}

[data-theme="dark"] {
  color-scheme: only dark;
  --page: #111315;
  --card: #1c2023;
  --panel: #171b1e;
  --field: #121517;
  --ink: #f1f3f5;
  --line: #343a40;
  --muted: #aab1b8;
  --shadow: rgba(0, 0, 0, .38);
}

body {
  font-family: var(--font-ui);
}