:root {
  color-scheme: light dark;
  --font-body: "Atkinson Hyperlegible", "Aptos", "Segoe UI", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", "Tahoma", "Arial", sans-serif;

  --page: #f7faf9;
  --surface: #fcfdfc;
  --surface-muted: #edf4f2;
  --surface-strong: #d9ebe7;
  --ink: #162522;
  --ink-soft: #465a55;
  --border: #b9cbc6;
  --border-strong: #78968e;
  --brand: #0c665c;
  --brand-hover: #084c45;
  --brand-soft: #d7efea;
  --coral: #ad4636;
  --success: #17643f;
  --warning: #7a4f00;
  --error: #9b2c2c;
  --focus: #ce5b24;
  --foundation: #0c665c;
  --development: #2d5392;
  --progression: #69436d;
  --teacher: #805a18;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-small: 0.5rem;
  --radius: 0.875rem;
  --radius-large: 1.25rem;
  --shadow: 0 0.75rem 2.5rem rgba(20, 62, 54, 0.09);
  --page-width: 76rem;
  --reading-width: 52rem;
  --sticky-header-height: 4.25rem;
  --lesson-progress-height: 4.25rem;
  --layer-floating: 30;
  --layer-header: 40;
  --layer-menu: 50;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101917;
    --surface: #17231f;
    --surface-muted: #1d302b;
    --surface-strong: #28443c;
    --ink: #eff7f4;
    --ink-soft: #bed0ca;
    --border: #3f5c54;
    --border-strong: #72988d;
    --brand: #70cabe;
    --brand-hover: #a2ddd5;
    --brand-soft: #1d463f;
    --coral: #ee8a78;
    --success: #75d4a1;
    --warning: #f0c46d;
    --error: #ff9d9d;
    --focus: #ffab69;
    --foundation: #70cabe;
    --development: #94b7fa;
    --progression: #d2a4d5;
    --teacher: #e1b766;
    --shadow: 0 0.75rem 2.5rem rgba(2, 10, 8, 0.25);
  }
}