@font-face {
  font-family: Cairo;
  src: url("assets/atlas/cairo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --atlas-font: Cairo, "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  --atlas-bg: #eaf6fa;
  --atlas-surface: #fff;
  --atlas-ink: #152b4b;
  --atlas-muted: #46677a;
  --atlas-blue: #075f85;
  --atlas-action: #00698f;
  --atlas-line: #d2e7ee;
  --atlas-soft: #d9f2f7;
  --atlas-active: #deeff7;
  --atlas-success: #176554;
  --atlas-danger: #a22c49;
  --atlas-shadow: 0 10px 24px #163f5710;
}

/* The subset covering Arabic takes precedence for shaped runs. */
@font-face {
  font-family: Cairo;
  src: url("assets/atlas/cairo-arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF;
}

html:has(> body:is(.atlas-learner,.atlas-student,.atlas-guardian,.atlas-admin)) {
  background: var(--atlas-bg);
}

body:is(.atlas-learner,.atlas-student,.atlas-guardian,.atlas-admin) {
  font-family: var(--atlas-font);
  color: var(--atlas-ink);
  background: var(--atlas-bg);
}

.atlas-learner {
  --ink: var(--atlas-ink);
  --green: var(--atlas-action);
  --green2: var(--atlas-blue);
  --muted: var(--atlas-muted);
  --paper: var(--atlas-bg);
  --line: var(--atlas-line);
  --shadow: var(--atlas-shadow);
}

body:is(.atlas-learner,.atlas-student,.atlas-guardian,.atlas-admin) :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--atlas-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.atlas-learner) { scroll-behavior: auto; }
}