:root {
  --paper: #f8f4e8;
  --paper-deep: #eee7d5;
  --ink: #24322a;
  --ink-soft: #617066;
  --leaf: #66885e;
  --leaf-deep: #3e684b;
  --leaf-pale: #dfe8cf;
  --sprout: #b9d17c;
  --clay: #c87852;
  --clay-pale: #f1d5bf;
  --sun: #e8b956;
  --sun-pale: #fae9b8;
  --mist: #b9d5d3;
  --mist-pale: #e0efeb;
  --berry: #a76168;
  --white: #fffdf7;
  --danger: #a3544b;
  --line: rgba(53, 74, 59, 0.13);
  --shadow-sm: 0 5px 14px rgba(67, 76, 57, 0.08);
  --shadow-md: 0 14px 34px rgba(67, 76, 57, 0.13);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-round: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: #d8d7cc;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 253, 247, 0.9), transparent 35%),
    linear-gradient(145deg, #d8e2d0, #e8ddca);
}

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

button {
  color: inherit;
}

a {
  color: inherit;
}