/* ============================================================
   كل العرب — design tokens (light + dark)
   Brand palette: Pantone Blue 072 C + Pantone Red 032 C.
   Blue is the structural colour (headers, footers, avatars, links);
   red is the accent (CTAs, section marks). No black surfaces.
   ============================================================ */

:root{
  /* accent — Pantone Red 032 C */
  --red:#EF3340; --red-deep:#C81E2B; --red-soft:#FDE8EA;
  /* brand — Pantone Blue 072 C */
  --brand:#10069F; --brand-2:#2A2FD6; --brand-deep:#0A0470; --brand-soft:#E9EAF8;
  --gold:#EF3340; --gold-soft:#FDE8EA;
  --fb:#1877F2; --ig:#E1306C; --tg:#2AABEE; --wa:#25D366; --yt:#FF0000; --xx:#404046;
  --ink:#131316; --ink-2:#3c3c42; --muted:#6d6d76;
  --bg:#f5f6fb; --surface:#ffffff; --surface-2:#eceef7;
  --line:#e0e2ee; --line-strong:#c9cce0;
  /* "black" blocks are now brand blue */
  --black-block:#10069F; --on-black:#ffffff;
  --shadow:0 2px 14px rgba(16,6,159,.09);
  --radius:4px; --radius-sm:4px;
  --font-head:'Almarai',sans-serif;
  --font-body:'IBM Plex Sans Arabic',sans-serif;
  --maxw:1280px;
}

html[data-theme="dark"]{
  --red:#E84D5B; --red-deep:#F05C69; --red-soft:#33191c;
  --brand:#5A63FF; --brand-2:#8b90ff; --brand-deep:#3339c9; --brand-soft:#1b1f57;
  --gold:#E84D5B; --gold-soft:#33191c;
  --ink:#F1F4F7; --ink-2:#A6B0BC; --muted:#737F8C;
  /* neutral dark theme (blue-grey, not blue) */
  --bg:#0F1419; --surface:#1A212A; --surface-2:#222B35;
  --line:#2B3541; --line-strong:#37424F;
  --black-block:#141A21; --on-black:#ffffff;
  --shadow:0 2px 16px rgba(0,0,0,.55);
  /* not tokenised elsewhere — consumed by the dark overrides below */
  --header:#141A21; --input:#171E26;
}