:root {
  --sc-canvas: #f2f0ec;
  --sc-canvas-mid: #ece9e4;
  --sc-surface: #faf8f4;
  --sc-surface-raised: #efece7;
  --sc-ink: #2f2d2a;
  --sc-muted: #6a655e;
  --sc-tertiary: #858078;
  --sc-border: #b9b3ab;
  --sc-border-soft: #d1cbc4;
  --sc-divider: rgba(47, 45, 42, 0.13);
  --sc-accent: #3b3936;
  --sc-positive: #424b2e;
  --sc-warning: #6b4536;
  --sc-danger: #713b33;
  --sc-code: #4d4944;
  --sc-code-bg: rgba(47, 45, 42, 0.07);
  --sc-code-block: #e8e4de;
  --sc-shadow: rgba(28, 26, 24, 0.10);
  --sc-glass: rgba(250, 248, 244, 0.72);
  --sc-glass-strong: rgba(250, 248, 244, 0.88);
  --sc-floating: rgba(255, 255, 255, 0.56);
  --sc-max: 1180px;
  --sc-reading: 760px;
  --sc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  --sc-font-mono: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

.dark {
  --sc-canvas: #050505;
  --sc-canvas-mid: #090909;
  --sc-surface: #101010;
  --sc-surface-raised: #181818;
  --sc-ink: #eaeaea;
  --sc-muted: #9a9a9a;
  --sc-tertiary: #747474;
  --sc-border: #323232;
  --sc-border-soft: #242424;
  --sc-divider: rgba(255, 255, 255, 0.08);
  --sc-accent: #ececec;
  --sc-positive: #98a58f;
  --sc-warning: #c08a72;
  --sc-danger: #c78273;
  --sc-code: #d1d1d1;
  --sc-code-bg: rgba(255, 255, 255, 0.08);
  --sc-code-block: #101010;
  --sc-shadow: rgba(0, 0, 0, 0.38);
  --sc-glass: rgba(18, 18, 18, 0.66);
  --sc-glass-strong: rgba(20, 20, 20, 0.88);
  --sc-floating: rgba(34, 34, 34, 0.56);
}

html {
  scroll-behavior: smooth;
  background: var(--sc-canvas);
}

body {
  margin: 0;
  color: var(--sc-ink);
  font-family: var(--sc-font-sans);
  letter-spacing: -0.005em;
  background: var(--sc-canvas);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
button,
input {
  font: inherit;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--sc-ink);
  outline-offset: 4px;
}

::selection {
  color: var(--sc-surface);
  background: var(--sc-ink);
}

.sc-skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border: 1px solid var(--sc-ink);
  border-radius: 12px;
  color: var(--sc-surface);
  background: var(--sc-ink);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 140ms ease;
}

.sc-skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}