:root {
  /* Typography */
  --site-font-sans: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  --site-font-editorial: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-font-serif: Georgia, "Times New Roman", serif;
  --site-font-cjk-serif: "Yu Mincho", "Hiragino Mincho ProN", "Songti SC", Georgia, serif;

  /* Shared light system */
  --site-paper: #efeee8;
  --site-paper-raised: #f8f8f5;
  --site-panel: #f5f4ef;
  --site-ink: #10100f;
  --site-muted: #6b6a64;
  --site-line: #b9b8b0;
  --site-accent: #e43a25;
  --site-signal: #596edc;

  /* Dark experimental system */
  --site-dark: #050505;
  --site-light-ink: #f4f4f1;
  --site-dark-muted: rgba(244, 244, 241, 0.58);
  --site-dark-line: rgba(244, 244, 241, 0.2);
  --site-dark-panel: rgba(0, 0, 0, 0.72);

  /* Spacing and layout */
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 12px;
  --site-space-4: 16px;
  --site-space-5: 20px;
  --site-space-6: 24px;
  --site-space-8: 32px;
  --site-space-10: 40px;
  --site-gutter: clamp(16px, 1.6vw, 30px);
  --site-content-max: 1440px;

  /* Canonical breakpoint values. CSS media rules mirror these values because
     custom properties are not currently valid inside @media conditions. */
  --site-breakpoint-small: 520px;
  --site-breakpoint-mobile: 700px;
  --site-breakpoint-compact: 760px;
  --site-breakpoint-tablet: 980px;
  --site-breakpoint-wide: 1050px;

  /* Interaction */
  --site-focus-width: 2px;
  --site-transition-fast: 160ms;
  --site-transition-normal: 260ms;
}