:root {
  color-scheme: light;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --page: #f5f6f7;
  --page-deep: #eef0f2;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f0f2f4;
  --surface-strong: #e7eaed;
  --text: #121518;
  --text-soft: #353b41;
  --muted: #626b74;
  --muted-strong: #4e5760;
  --line: #dde1e5;
  --line-strong: #c8ced4;
  --accent: #2f66df;
  --accent-hover: #2558c7;
  --accent-soft: #e8efff;
  --accent-ink: #19448f;
  --success: #207d5a;
  --success-soft: #e8f6f0;
  --danger: #bd3a42;
  --focus: #2f66df;

  --header-bg: rgba(245, 246, 247, 0.82);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.91);
  --shadow-xs: 0 1px 2px rgba(20, 26, 32, 0.05);
  --shadow-sm: 0 8px 24px rgba(20, 26, 32, 0.07);
  --shadow-md: 0 24px 60px rgba(20, 26, 32, 0.1);
  --shadow-lg: 0 38px 100px rgba(20, 26, 32, 0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shell: 1200px;
  --header-height: 72px;
  --section-space: clamp(88px, 10vw, 144px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #101214;
    --page-deep: #0c0e10;
    --surface: #16191c;
    --surface-raised: #1a1e22;
    --surface-soft: #1d2125;
    --surface-strong: #252a2f;
    --text: #edf0f2;
    --text-soft: #cbd0d4;
    --muted: #9aa2a9;
    --muted-strong: #b3bac0;
    --line: #2a2f34;
    --line-strong: #394047;
    --accent: #79a0ff;
    --accent-hover: #91b1ff;
    --accent-soft: #192748;
    --accent-ink: #b7cbff;
    --success: #65c69c;
    --success-soft: #153226;
    --danger: #ff8a91;
    --focus: #8eafff;
    --header-bg: rgba(16, 18, 20, 0.84);
    --glass: rgba(22, 25, 28, 0.76);
    --glass-strong: rgba(22, 25, 28, 0.93);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 28px 68px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 42px 110px rgba(0, 0, 0, 0.44);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101214;
  --page-deep: #0c0e10;
  --surface: #16191c;
  --surface-raised: #1a1e22;
  --surface-soft: #1d2125;
  --surface-strong: #252a2f;
  --text: #edf0f2;
  --text-soft: #cbd0d4;
  --muted: #9aa2a9;
  --muted-strong: #b3bac0;
  --line: #2a2f34;
  --line-strong: #394047;
  --accent: #79a0ff;
  --accent-hover: #91b1ff;
  --accent-soft: #192748;
  --accent-ink: #b7cbff;
  --success: #65c69c;
  --success-soft: #153226;
  --danger: #ff8a91;
  --focus: #8eafff;
  --header-bg: rgba(16, 18, 20, 0.84);
  --glass: rgba(22, 25, 28, 0.76);
  --glass-strong: rgba(22, 25, 28, 0.93);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 28px 68px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 42px 110px rgba(0, 0, 0, 0.44);
}

:root[data-theme="light"] {
  color-scheme: light;
}