/* MoboPing design tokens — dark is the app's own palette, light is derived from it. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #090e19;
  --bg-2: #0d1422;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .08);
  --surface-solid: #111a2a;
  --menu: #1e2937;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --text: #fff;
  --muted: rgba(255, 255, 255, .62);
  --subtle: rgba(255, 255, 255, .42);
  --green: #55ff8a;
  --green-2: #17e9ad;
  --green-ink: #55ff8a;
  --green-soft: rgba(85, 255, 138, .1);
  --on-green: #04210f;
  --red: #e8232f;
  --red-2: #ff4d57;
  --red-soft: rgba(232, 35, 47, .12);
  --blue: #006aff;
  --blue-2: #0055cd;
  --blue-ink: #6aa8ff;
  --yellow: #ffef02;
  --bad: #ff3b3b;
  --glow-blue: rgba(0, 85, 205, .35);
  --glow-green: rgba(85, 255, 138, .14);
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);
  --header: rgba(9, 14, 25, .78);
  --grid-line: rgba(255, 255, 255, .035);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --pill: 999px;

  --font-fa: 'Vazirmatn', 'IBM Plex Sans', Tahoma, sans-serif;
  --font-en: 'IBM Plex Sans', 'Vazirmatn', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font: var(--font-fa);

  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs: 15.5px;
  --fs-lg: clamp(16px, 1.3vw, 18px);
  --fs-h3: clamp(18px, 1.6vw, 21px);
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h1: clamp(36px, 6vw, 72px);

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root.light {
  color-scheme: light;
  --bg: #f6f8fb;
  --bg-2: #eef2f7;
  --surface: #fff;
  --surface-2: #f1f4f9;
  --surface-solid: #fff;
  --menu: #fff;
  --line: rgba(9, 14, 25, .1);
  --line-2: rgba(9, 14, 25, .18);
  --text: #090e19;
  --muted: rgba(9, 14, 25, .66);
  --subtle: rgba(9, 14, 25, .48);
  --green-ink: #0e8a43;
  --green-soft: rgba(18, 161, 80, .1);
  --red-soft: rgba(232, 35, 47, .08);
  --blue-ink: #0055cd;
  --yellow: #b08900;
  --bad: #d92222;
  --glow-blue: rgba(0, 106, 255, .14);
  --glow-green: rgba(18, 161, 80, .1);
  --shadow: 0 18px 50px rgba(9, 14, 25, .1);
  --header: rgba(246, 248, 251, .82);
  --grid-line: rgba(9, 14, 25, .045);
}

:root[lang='en'] { --font: var(--font-en); }
/* Persian pages: numbers and Latin words use Vazirmatn too, so Persian digits always render in one font. */
:root[lang='fa'] { --font-en: var(--font-fa); }