:root {
  --qj-page-width: min(960px, calc(100vw - 420px));
  --qj-page-max-width: 980px;
  --qj-reader-sidebar: 304px;
  --qj-reader-topbar: 64px;
  --qj-reader-control-size: 40px;

  --qj-color-app-bg: #161616;
  --qj-color-layer-01: #262626;
  --qj-color-layer-02: #393939;
  --qj-color-layer-03: #525252;
  --qj-color-border-subtle: #393939;
  --qj-color-border-strong: #6f6f6f;
  --qj-color-text-on-dark: #f4f4f4;
  --qj-color-text-secondary: #c6c6c6;
  --qj-color-text-placeholder: #8d8d8d;
  --qj-color-interactive: #0f62fe;
  --qj-color-interactive-hover: #0353e9;
  --qj-color-focus: #0f62fe;
  --qj-color-cyan: #1192e8;
  --qj-color-purple: #8a3ffc;
  --qj-color-green: #24a148;

  --qj-color-document: #ffffff;
  --qj-color-document-soft: #f4f4f4;
  --qj-color-paper: #ffffff;
  --qj-color-surface: #f4f4f4;
  --qj-color-ink: #161616;
  --qj-color-muted: #6f6f6f;
  --qj-color-line: #e0e0e0;
  --qj-color-soft-line: #f4f4f4;
  --qj-color-brand: #0f62fe;
  --qj-color-brand-strong: #002d9c;
  --qj-color-accent: #1192e8;
  --qj-color-teal: #007d79;
  --qj-color-wash: #f4f4f4;
  --qj-color-table-head: #e8f0ff;

  --qj-font-body: "IBM Plex Sans", "PingFang TC", "Noto Sans TC", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  --qj-font-serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", "PMingLiU", serif;
  --qj-font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

  --qj-text-xs: 8.5pt;
  --qj-text-sm: 9.5pt;
  --qj-text-md: 10.5pt;
  --qj-text-lg: 13.5pt;
  --qj-text-xl: 21pt;
  --qj-text-title: clamp(34px, 5vw, 64px);

  --qj-leading-tight: 1.28;
  --qj-leading-body: 1.72;
  --qj-leading-table: 1.45;

  --qj-space-1: 2mm;
  --qj-space-2: 4mm;
  --qj-space-3: 6mm;
  --qj-space-4: 9mm;
  --qj-space-5: 13mm;

  --qj-radius-sm: 2mm;
  --qj-shadow-page: 0 28px 80px rgba(0, 0, 0, 0.32);
}