:root {
  color-scheme: light;

  --color-primary: #273470;
  --color-orange: #e96852;
  --color-green: #00ae8d;
  --color-purple: #625d9c;
  --color-cyan: #00c1de;
  --color-bright-green: #4bbf4b;
  --color-amber: #ffb548;
  --color-ink: #101820;
  --color-background: #ffffff;
  --color-border: #dde1ea;
  --color-muted: #687087;

  --surface-blue: #f2f4fa;
  --surface-orange: #fdf0ed;
  --surface-green: #eaf8f5;
  --surface-purple: #f3f1f8;
  --surface-cyan: #eaf9fc;
  --surface-amber: #fff7e8;
  --surface-neutral: #f7f8fa;

  --font-sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.375rem;
  --text-display: 4rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-control: 0.375rem;
  --radius-card: 0.625rem;
  --radius-panel: 0.875rem;
  --shadow-float: 0 16px 40px rgb(16 24 32 / 10%);
  --focus-ring: 0 0 0 3px rgb(233 104 82 / 35%);
  --content-width: 70rem;
  --reading-width: 45rem;
  --header-height: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}