/* ParticleJump brand tokens. Plain CSS custom properties, no framework needed. */

/* Base palette, type and layout width. */
:root {
  color-scheme: light;
  --pj-blue: #2162ff;
  --pj-blue-hover: #164ed6;
  --pj-ink: #151613;
  --pj-paper: #f7f4ec;
  --pj-surface: #fffefa;
  --pj-tint: #eef3ff;
  --pj-muted: #666962;
  --pj-line: #deded4;
  --pj-sans:
    Inter, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --pj-content-width: 1200px;
}

/* Dark website theme: overrides the base values above. Must stay after them. */
:root {
  color-scheme: dark;
  --pj-sans: Outfit, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --pj-paper: #101113;
  --pj-ink: #f6f7fa;
  --pj-muted: #aaaeb8;
  --pj-line: #24262c;
  --pj-surface: #17191d;
  --pj-tint: #202838;
}

/* Phone and tablet (up to 1023px), see README.md. The desktop site keeps its
   own sizes; these values are only used by phone/tablet styles. */
:root {
  /* Type scale: fluid from 375px to 1023px wide. */
  --pj-fs-display: clamp(40px, 6.4vw + 16px, 64px);
  --pj-fs-h1: clamp(34px, 4.6vw + 16.75px, 52px);
  --pj-fs-h2: clamp(28px, 3.6vw + 14.5px, 42px);
  --pj-fs-h3: clamp(19px, 1vw + 15.25px, 23px);
  --pj-fs-lead: clamp(17px, 0.5vw + 15.1px, 19px);
  --pj-fs-body: clamp(16px, 0.25vw + 15.06px, 17px);
  --pj-fs-meta: 14px;
  /* Spacing scale: use only these steps. */
  --pj-space-1: 4px;
  --pj-space-2: 8px;
  --pj-space-3: 12px;
  --pj-space-4: 16px;
  --pj-space-5: 24px;
  --pj-space-6: 32px;
  --pj-space-7: 48px;
  --pj-space-8: 64px;
  /* Tablet values; phone values below. */
  --pj-gutter: 32px;
  --pj-section-y: 72px;
  --pj-stack: 32px;
  --pj-card-gap: 20px;
  /* Smallest tap target. */
  --pj-tap: 44px;
}
@media (max-width: 767.98px) {
  :root {
    --pj-gutter: 20px;
    --pj-section-y: 48px;
    --pj-stack: 24px;
    --pj-card-gap: 16px;
  }
}