:root {
  color-scheme: dark light;
  --canvas: #111214;
  --sidebar: #18191c;
  --surface: #202125;
  --surface-raised: #292a2f;
  --surface-selected: #303136;
  --text: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #77777d;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent: #0a84ff;
  --accent-contrast: #ffffff;
  --success: #30d158;
  --warning: #ffd60a;
  --danger: #ff453a;
  --radius: 8px;
  --sidebar-width: 196px;
  --topbar-height: 56px;
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.32);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f5f5f7;
  --sidebar: #ececef;
  --surface: #ffffff;
  --surface-raised: #ececf0;
  --surface-selected: #dcdce1;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.16);
  --accent: #0071e3;
  --accent-contrast: #ffffff;
  --focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.24);
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--text);
}

body {
  min-height: 100dvh;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}