:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-gradient-start: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f5f5f5;
  --surface-hover: #ebebeb;
  --field-bg: #ffffff;
  --panel-bg: rgba(255, 255, 255, 0.92);
  --note-bg: rgba(255, 255, 255, 0.86);
  --code-bg: rgba(0, 0, 0, 0.06);
  --link-bg: rgba(0, 0, 0, 0.04);
  --border: #d6d6d6;
  --border-strong: #8a8a8a;
  --text: #111111;
  --muted: #555555;
  --subtle: #757575;
  --accent: #111111;
  --accent-strong: #000000;
  --accent-focus: rgba(0, 0, 0, 0.18);
  --accent-text: #ffffff;
  --danger: #b6422e;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --bg-gradient-start: #000000;
    --surface: #111111;
    --surface-raised: #1b1b1b;
    --surface-hover: #262626;
    --field-bg: #0a0a0a;
    --panel-bg: rgba(0, 0, 0, 0.88);
    --note-bg: rgba(0, 0, 0, 0.78);
    --code-bg: rgba(255, 255, 255, 0.08);
    --link-bg: rgba(255, 255, 255, 0.04);
    --border: #2b2b2b;
    --border-strong: #5f5f5f;
    --text: #f5f5f5;
    --muted: #b8b8b8;
    --subtle: #8c8c8c;
    --accent: #ffffff;
    --accent-strong: #ffffff;
    --accent-focus: rgba(255, 255, 255, 0.2);
    --accent-text: #000000;
    --danger: #e27b66;
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  }
}