/* Design tokens — Gulf Gadget Guide
   Single source of truth for color/type/layout. Change values here, not
   in component CSS. Fonts are self-hosted (see inc/theme-setup.php) for
   Core Web Vitals — no Google Fonts CDN round trip in production. */

:root {
  /* color */
  --bg: #F1F4EF;
  --surface: #FFFFFF;
  --ink: #1C201D;
  --ink-soft: #5B6157;
  --dash-1: #D9DFD5;
  --dash-2: #C3CBBD;
  --red: #E0402A;
  --teal: #0F7A6C;
  --red-tint: #FBEAE6;
  --teal-tint: #E4F0EC;

  /* type */
  --font-display: "Big Shoulders Display", "IBM Plex Sans Arabic", sans-serif;
  --font-display-ar: "IBM Plex Sans Arabic", "Big Shoulders Display", sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
  --font-body-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* layout */
  --radius: 14px;
  --gap: clamp(1rem, 2vw, 1.75rem);
  --container: 1180px;
}