:root {
  color-scheme: light;
  /* core light palettes — restrained professional blue (Stripe/Notion-like) */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text-1: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;
  --accent: #2563eb;      /* bright professional blue — primary actions */
  --navy: #1e3a8a;        /* deep navy — brand / page headings */
  --sky: #38bdf8;         /* bright sky-blue accent (sparing use) */
  --teal: #0e7490;
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #16a34a;
  --info: #2f6f97;

  /* derived tonal frame (auto-adapts to scheme/theme) */
  --surface-2: color-mix(in srgb, var(--bg) 62%, var(--surface));
  --surface-3: color-mix(in srgb, var(--bg) 32%, var(--surface));
  --surface-inset: color-mix(in srgb, var(--bg) 46%, var(--surface));
  --border: color-mix(in srgb, var(--text-3) 24%, var(--surface));
  --border-strong: color-mix(in srgb, var(--text-3) 46%, var(--surface));
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #000);
  --accent-subtle: color-mix(in srgb, var(--accent) 11%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 30%, var(--surface));
  --accent-deep: color-mix(in srgb, var(--accent) 72%, #000);
  --teal-subtle: color-mix(in srgb, var(--teal) 11%, var(--surface));
  --danger-subtle: color-mix(in srgb, var(--danger) 11%, var(--surface));
  --warn-subtle: color-mix(in srgb, var(--warn) 11%, var(--surface));
  --ok-subtle: color-mix(in srgb, var(--ok) 11%, var(--surface));
  --info-subtle: color-mix(in srgb, var(--info) 11%, var(--surface));

  --font-ui: 'Segoe UI', Inter, system-ui, -apple-system, BlinkMacSystemFont,
    'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
  --font-paper: 'STIX Two Text', 'Times New Roman', Cambria, serif;
  --font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --lh-tight: 1.3;
  --lh-normal: 1.5;
  --lh-reading: 1.75;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(30, 41, 59, .08), 0 4px 14px rgba(30, 41, 59, .06);
  --sh-2: 0 12px 34px rgba(30, 41, 59, .12), 0 4px 14px rgba(30, 41, 59, .07);
  --sh-3: 0 30px 70px rgba(30, 41, 59, .18), 0 6px 20px rgba(30, 41, 59, .08);
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 46px;
  --row-h: 44px;
  --nav-w: 168px;
  --nav-w-compact: 78px;
  --topbar-h: 68px;
  --inspector-w: 360px;
  --dur-fast: 140ms;
  --dur: 220ms;
  --ease: cubic-bezier(.3, .7, .3, 1);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  /* 提亮的深色模式：中等暗度石板蓝底，保证文字清晰可读 */
  --bg: #131c2e;
  --surface: #1b2538;
  --text-1: #eef3fb;
  --text-2: #bfcce1;
  --text-3: #98a8c2;
  --accent: #5b9bff;
  --navy: #a7c2ee;
  --sky: #7bd0f7;
  --teal: #6bb8d2;
  --danger: #f07b72;
  --warn: #eec07a;
  --ok: #74d19b;
  --info: #8fb6e2;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .20);
  --sh-2: 0 8px 24px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .20);
  --sh-3: 0 24px 60px rgba(0, 0, 0, .42), 0 3px 14px rgba(0, 0, 0, .20);
}

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