:root {
  --ink: #242424;
  --ink-soft: #424242;
  --muted: #616161;
  --accent: #0f6cbd;
  --accent-soft: #e8f3fc;
  --surface: #ffffff;
  --canvas: #f3f3f3;
  --border: #e0e0e0;
  --card: #ffffff;
  --card-hover: #f5f5f5;
  --danger: #c62828;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f5;
    --ink-soft: #e0e0e0;
    --muted: #a0a0a0;
    --accent: #4da3ff;
    --accent-soft: #1a2f42;
    --surface: #2b2b2b;
    --canvas: #1f1f1f;
    --border: #3a3a3a;
    --card: #2b2b2b;
    --card-hover: #333333;
    --danger: #ef9a9a;
    color-scheme: dark;
  }
}

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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100%;
  min-height: 100%;
  height: 100%;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}