/* Yalla China — design tokens (E4-T1) · Vol 36.5 */

/* Cairo — SELF-HOSTED variable font (weights 400-900 in one small file per
   script). Same-origin, so it works inside China and needs no loadCSS hack —
   the two issues that banned external webfonts (see shell/header.php). The
   old stack named "Cairo" without ever loading it, so Arabic silently fell
   back to the OS UI font; these two files (~64 KB total) make the intended
   face real. font-display:swap = text is never invisible while they load. */
@font-face{
  font-family:"Cairo";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/cairo-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face{
  font-family:"Cairo";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/cairo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD;
}

:root{
  --red:#e8202a;--red-dark:#c2151d;--navy:#0d2966;--navy-700:#15347a;
  --ink:#1c2436;--muted:#6b7385;--line:#e9edf5;--soft:#f3f5fa;--bg:#f1f4f9;
  --shadow-sm:0 1px 3px rgba(13,41,102,.04),0 8px 24px rgba(13,41,102,.04);
  --shadow:0 4px 16px rgba(13,41,102,.06);--shadow-lg:0 18px 44px rgba(13,41,102,.13);
  /* Aliases reference the primaries so each color has ONE source of truth. */
  --yc-navy:var(--navy);--yc-navy-2:#0a1f4d;--yc-red:var(--red);--surface:#fff;--surface-alt:var(--soft);
  --text:var(--ink);--text-muted:var(--muted);--warning:#b8860b;--success:#16a34a;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --e1:0 1px 3px rgba(13,41,102,.06);--e2:0 4px 16px rgba(13,41,102,.10);--e3:0 18px 44px rgba(13,41,102,.16);
  --s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  /* Arabic: self-hosted Cairo first, then real Arabic-capable system faces.
     (The Chinese "Noto Sans SC" that used to sit here was useless for Arabic
     and a glyph-substitution risk.) --font-head exists so headings can get a
     distinct face later by changing ONE token. */
  --font-ar:"Cairo",system-ui,"Segoe UI","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif;
  --font-latin:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-zh:"Noto Sans SC",system-ui,sans-serif;
  --font-head:"Cairo",system-ui,"Segoe UI","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif;
  --header-h:72px;--maxw:1240px;
}