:root {
  color-scheme: light;
  --brand: #63065f;
  --brand-interactive: #63065f;
  --brand-readable: #63065f;
  --brand-strong: #63065f;
  --brand-soft: rgba(99, 6, 95, 0.1);
  --page: #fafafa;
  --surface: #ffffff;
  --surface-raised: #ececec;
  --surface-soft: #f3f3f3;
  --text: #222222;
  --muted: #888888;
  --border: #d9d9d9;
  --code-bg: #f0f0f0;
  --code-text: #000000;
  --header-bg: rgba(255, 255, 255, 0.64);
  --focus: #63065f;
  --font-sans-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-sans-zh: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-sans-zh-tw: "Noto Sans TC", "Source Han Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --content-wide: 1120px;
  --content-reading: 740px;
  --page-gutter: 30px;
  /* Responsive type unit: only typography scales; rem-based layout stays stable. */
  --font-size-unit: clamp(0.94rem, calc(0.92rem + 0.1vw), 1rem);
  --font-size-home-display: clamp(calc(var(--font-size-unit) * 2.7), calc(calc(var(--font-size-unit) * 2.2) + 2.2vw), calc(var(--font-size-unit) * 4));
  --font-size-home-section-title: clamp(calc(var(--font-size-unit) * 1.35), 2.4vw, calc(var(--font-size-unit) * 1.85));
  --font-size-section-title: clamp(calc(var(--font-size-unit) * 1.55), 3vw, calc(var(--font-size-unit) * 2.2));
  --font-size-prose-h2: clamp(calc(var(--font-size-unit) * 1.3), 2.35vw, calc(var(--font-size-unit) * 1.72));
  --font-size-prose-h3: clamp(calc(var(--font-size-unit) * 1.15), 1.85vw, calc(var(--font-size-unit) * 1.35));
  --font-size-prose-h4: clamp(calc(var(--font-size-unit) * 1.05), 1.5vw, calc(var(--font-size-unit) * 1.12));
  --header-height: 72px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --motion-fast: 150ms;
  --motion-standard: 200ms;
  --motion-overlay: 300ms;
  --motion-theme: 360ms;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --brand: #c979c4;
  --brand-interactive: #c979c4;
  --brand-readable: #c979c4;
  --brand-strong: #c979c4;
  --brand-soft: rgba(201, 121, 196, 0.16);
  --page: #111111;
  --surface: #1d1d1d;
  --surface-raised: #262626;
  --surface-soft: #1a1a1a;
  --text: #eeeeee;
  --muted: #888888;
  --border: #333333;
  --code-bg: #1e1e1e;
  --code-text: #d4d4d4;
  --header-bg: rgba(8, 8, 8, 0.64);
  --focus: #c979c4;
}