:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #fff;
  --surface-subtle: #f9fafc;
  --text: #202635;
  --muted: #626d80;
  --border: #e5e8ee;
  --hover: #f3f4f8;
  --story: #f0eef8;
  --story-line: #ded9ef;
  --input: #fff;
  --nav-active: #efecfc;
  --preview: #f8f9fc;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12151d;
  --surface: #1b1f2a;
  --surface-subtle: #181c26;
  --text: #edf0f7;
  --muted: #a1abbe;
  --border: #303647;
  --hover: #252b3a;
  --story: #211f33;
  --story-line: #41395d;
  --input: #161b26;
  --nav-active: #322a4f;
  --accent: #b5a7ff;
  --accent-hover: #cec4ff;
  --accent-soft: #302a48;
  --success: #8bd8ad;
  --success-soft: #1f362b;
  --danger: #ffb1ba;
  --danger-soft: #3f242d;
  --focus: #c0b1ff;
  --preview: #252b37;
  --shadow: 0 3px 15px #0000000d;
}