/* Saad design tokens - taken from the official identity guide
   («الهوية البصرية - الدليل المختصر ١»), not invented here.

   Clay (#B17459) stands for education, slate (#5F6D6D) for sustainability.
   One deliberate addition: --clay-strong. The guide's clay is 3.8:1 against
   white - fine for shapes and large display type, below AA for button text -
   so anything carrying small text on clay uses the darker shade of the same
   hue (5.5:1). «الأصم أولًا» makes contrast a requirement, not a preference. */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/static/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'El Messiri';
  src: url('/static/fonts/ElMessiri-arabic-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'El Messiri';
  src: url('/static/fonts/ElMessiri-arabic-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  color-scheme: light;

  /* Primary palette (guide p.4) */
  --clay: #B17459;
  --clay-strong: #96593F;
  --clay-soft: #F3E4DA;
  --slate: #5F6D6D;
  --slate-deep: #3D4A4A;
  --slate-soft: #E4E8E6;
  --ink: #35353C;
  --ink-2: #5E6567;
  --blush: #D89986;
  --sand: #E2C5AF;
  --stone: #D9DAD5;

  /* Secondary palette: the colours of the seven subject mascots (the same
     values as core.constants.DEFAULT_SUBJECTS). Play, never meaning - whatever
     wears one also carries a shape, a numeral or a word. All are light enough
     for --ink text (4.6:1 and up, measured) and print as pale greys. */
  --mascot-math: #F08E68;
  --mascot-arabic: #B28EF2;
  --mascot-computer: #EBB65E;
  --mascot-english: #A6B3FF;
  --mascot-physics: #F4FF95;
  --mascot-chemistry: #BAFFDB;
  --mascot-biology: #FDB4EE;

  /* Surfaces */
  --paper: #F1EFED;
  --surface: #FFFFFF;
  --rule: #DAD6D0;
  --rule-strong: #BDB7AE;

  /* Feedback. Always paired with an icon or words - never colour alone. */
  --ok: #2F6B4F;
  --ok-soft: #E3F0E8;
  --bad: #A23B2D;
  --bad-soft: #F7E3DF;

  /* Shape. The guide frames everything in generous rounds; its swatches are
     arch-topped. --arch is reserved for media frames and subject cards. */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 32px;
  --r-full: 999px;
  --arch: 999px 999px var(--r-lg) var(--r-lg);

  --focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--clay-strong);

  /* Type */
  --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'El Messiri', var(--font);

  --t-sm: 0.875rem;
  --t-base: 1.0625rem;   /* 17px: young readers, second-language readers */
  --t-md: 1.3125rem;
  --t-lg: 1.625rem;
  --t-xl: 2.0625rem;
  --t-2xl: 2.75rem;
  --t-3xl: 3.625rem;

  --measure: 62ch;
  --page: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 76px;

  /* Motion: only ever in answer to the person's own action. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
}