:root {
  --color-bg: #f7f8f5;
  --color-bg-soft: #eef2f2;
  --color-surface: #ffffff;
  --color-surface-strong: #101a34;
  --color-text: #171d25;
  --color-text-muted: #65707c;
  --color-line: rgba(26, 39, 58, 0.16);
  --color-accent: #2536d8;
  --color-accent-strong: #1627b6;
  --color-accent-soft: rgba(26, 39, 58, 0.06);
  --color-teal: #1fd0d0;
  --color-purple: #8c20e8;
  --color-gold: #b98652;
  --color-white: #ffffff;
  --color-black: #000000;
  --shadow-soft: 0 24px 60px rgba(16, 26, 52, 0.08);
  --shadow-card: 0 16px 36px rgba(16, 26, 52, 0.06);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --site-max: min(1280px, calc(100vw - 96px));
  --site-max-narrow: min(1100px, calc(100vw - 96px));
  --font-display-latin: "Roboto", Arial, sans-serif;
  --font-body-latin: "Roboto", Arial, sans-serif;
  --font-display-cjk: "Noto Sans SC", sans-serif;
  --font-body-cjk: "Noto Sans SC", sans-serif;
  --font-display: var(--font-display-latin);
  --font-body: var(--font-body-latin);
  --display-xl: clamp(2.8rem, 5.2vw, 5.6rem);
  --display-l: clamp(2.1rem, 4.1vw, 3.9rem);
  --heading-xl: clamp(1.72rem, 3.1vw, 2.95rem);
  --heading-lg: clamp(1.4rem, 2.1vw, 2rem);
  --heading-md: clamp(1.18rem, 1.7vw, 1.5rem);
  --body-lg: clamp(1.05rem, 1.2vw, 1.18rem);
  --body: 1rem;
  --small: 0.92rem;
  --meta: 0.8rem;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --header-height: 88px;
  --transition-fast: 180ms ease;
  --transition-base: 320ms ease;
}

html[lang="zh"] {
  --font-display: var(--font-display-cjk);
  --font-body: var(--font-body-cjk);
}

@media (max-width: 1024px) {
  :root {
    --site-max: calc(100vw - 48px);
    --site-max-narrow: calc(100vw - 48px);
  }
}

@media (max-width: 720px) {
  :root {
    --site-max: calc(100vw - 32px);
    --site-max-narrow: calc(100vw - 32px);
    --header-height: 76px;
  }
}