:root {
  /* ---- Color ---- */
  --color-ink: #14152b;
  --color-ink-soft: #5b5e76;
  --color-ink-faint: #8b8ea3;

  --color-bg: #ffffff;
  --color-bg-soft: #f5f6fb;
  --color-line: #e8e9f2;
  --color-white: #ffffff;

  --color-surface-dark: #0d0e1b;
  --color-surface-dark-2: #171933;
  --color-on-dark: #f3f3fb;
  --color-on-dark-soft: #b9bad0;

  --color-brand: #27822f;
  --color-brand-ink: #1f6b27;
  --color-brand-bright: #65d642;
  --color-brand-2: #7b5cfa;

  /* Overridden per-page for game-specific accents */
  --game-accent: var(--color-brand);

  /* ---- Typography ---- */
  --font-sans: "Vazirmatn", "Tahoma", system-ui, sans-serif;

  --fs-h1: clamp(2.25rem, 1.55rem + 3vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.7;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 64px);
  --header-h: 70px;
  --header-h-mobile: 70px;

  /* ---- Radius & shadow ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-card: 0 20px 45px -18px rgba(15, 16, 40, 0.28);
  --shadow-card-hover: 0 32px 60px -18px rgba(15, 16, 40, 0.38);
  --shadow-header: 0 12px 30px -14px rgba(15, 16, 40, 0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 520ms;

  /* ---- z-index ---- */
  --z-header: 100;
  --z-mobile-nav: 90;
}

/* Breakpoints reference (used inline via media queries, kept here as documentation):
   mobile:  < 640px
   tablet:  640px – 1023px
   desktop: 1024px – 1439px
   wide:    >= 1440px
*/

@media (max-width: 720px) {
  :root {
    --header-h: var(--header-h-mobile);
  }
}