/* ==========================================================================
   مصر الرقمية — Design tokens (source of truth for colour, type, space, motion)
   Every text/background pair below is verified WCAG AA (≥ 4.5:1).
   Decorative-only colours are marked (decor) and must never carry text.
   ========================================================================== */

/* --- Fonts: IBM Plex Sans Arabic (SIL OFL 1.1), bundled locally ---------- */
@font-face {
  font-family: "Plex Arabic";
  src: url("../assets/fonts/plex-arabic-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../assets/fonts/plex-arabic-arabic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../assets/fonts/plex-arabic-arabic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../assets/fonts/plex-arabic-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../assets/fonts/plex-arabic-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../assets/fonts/plex-arabic-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Colour: surfaces ------------------------------------------------ */
  --bg: #f5f9fc; /* page (ice white) */
  --surface: #ffffff; /* cards, panels */
  --surface-tint: #e6f4f6; /* teal-tinted panels (text: --ink / --teal-700 OK) */
  --surface-gold: #fff4db; /* gold-tinted highlight panels (text: --ink / --gold-700 OK) */
  --border: #d7e4ea; /* visible borders — projector-safe */
  --border-strong: #b9cdd6;

  /* --- Colour: text ---------------------------------------------------- */
  --ink: #0b1f3a; /* primary text        15.6:1 on --bg */
  --ink-2: #3d5270; /* secondary text       7.5:1 on --bg */
  --ink-3: #5b6b82; /* captions/meta        5.4:1 on white */
  --ink-inverse: #ffffff; /* on --teal-700 5.9:1, on --ink 16.5:1 */

  /* --- Colour: brand --------------------------------------------------- */
  --teal-700: #006f7d; /* actions, links, accent text   5.9:1 on white */
  --teal-800: #005965; /* hover/pressed */
  --teal-100: #e6f4f6;
  --cyan-400: #2bc4d6; /* (decor) Nile glow, nodes, data lines */
  --cyan-200: #a8e6ee; /* (decor) soft glow */
  --gold-700: #795500; /* gold that carries meaning/text 6.8:1 on white */
  --gold-400: #e0a526; /* (decor) stamps, highlights, shield rim */
  --gold-200: #f5d68a; /* (decor) */

  /* --- Colour: feedback (always paired with icon + words) ---------------- */
  --ok: #1e7b4f;
  --ok-bg: #e5f4ec;
  --warn: #b3261e;
  --warn-bg: #fbe9e7;

  /* --- Typography ------------------------------------------------------ */
  --font: "Plex Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --fs-body: 1.125rem; /* 18px */
  --fs-small: 1rem; /* 16px — minimum for any text */
  --fs-btn: 1.0625rem; /* 17px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 4rem);
  --lh-body: 1.75;
  --lh-head: 1.35;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --- Space (4px base) ------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --content-max: 72rem; /* 1152px */
  --reading-max: 42rem; /* comfortable Arabic line length */
  --topbar-h: 4rem;

  /* --- Shape & elevation --------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 31, 58, 0.06), 0 2px 8px rgba(11, 31, 58, 0.06);
  --shadow-2: 0 4px 12px rgba(11, 31, 58, 0.08), 0 12px 32px rgba(11, 31, 58, 0.08);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--teal-700);

  /* --- Motion (all durations collapse to 0 when motion is off) ----------- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layers ----------------------------------------------------------- */
  --z-topbar: 50;
  --z-overlay: 80;
  --z-toast: 90;
}

/* Motion off: OS preference or the in-app toggle (html.motion-off) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}
html.motion-off {
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
}