/* 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.

   Mockup-match redesign (2026-09): replaces the black-redesign's own
   red/teal palette with the reference design's dark-navy + gold system,
   and drops the dashed "price-tag" motif for solid, elevated cards
   (style.css — search "solid card" for the component notes). --gold is
   now the one primary action/accent color site-wide (buttons, eyebrows,
   ratings); --pos/--neg are semantic-only (price down/up) and never
   double as the accent. Headings moved from Big Shoulders Display to
   IBM Plex Sans Bold to match the reference's normal-width headline —
   see fonts.css. --ink and --surface still swap on "inverted"
   components (buttons, active chips, the hub-banner). */

:root {
  /* color */
  --bg: #0B0D12;
  --surface: #131720;
  --surface-2: #1B2029;
  --ink: #F4F5F7;
  --ink-soft: #8B93A5;
  --dash-1: #1E222C;
  --dash-2: #2A2F3B;
  --gold: #E8A23A;
  --gold-strong: #F5B75C;
  --gold-tint: #241C10;
  --gold-ink: #1A1207;
  --red: #E2604A;
  --teal: #3FBF7F;
  --red-tint: #2B1712;
  --teal-tint: #12271C;

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

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