/* Mego Warm Bento — shared tokens */
:root {
  --canvas: #FCFBF8;
  --surface: #FFFFFF;
  --sunken: #F4F2ED;
  --border: #E9E5DD;
  --ink-1: #1C1B1A;
  --ink-2: #5A5754;
  --ink-3: #94908B;
  --primary: #FF7A45;
  --primary-press: #E8622F;
  --primary-soft: #FFEDE4;
  --secondary: #2B4C7E;
  --secondary-soft: #E7EDF6;
  --success: #2F9E63;
  --warning: #E1A03A;
  --chinese: #D2694F;
  --math: #3E7CC4;
  --english: #7A66B8;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-1: 0 1px 3px rgba(28,27,26,.05);
  --shadow-2: 0 4px 12px rgba(28,27,26,.07);
  --shadow-3: 0 12px 32px rgba(28,27,26,.12);
  --font-display: "Fraunces", "Noto Serif SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-1);
  background: var(--canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: none;
  font-size: 15px; font-weight: 600; transition: transform .15s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-press); }
.btn-ghost { background: transparent; border: 1.5px solid var(--border); color: var(--ink-1); }
.btn-secondary { background: var(--secondary); color: #fff; }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}
.tag-math { background: rgba(62,124,196,.12); color: var(--math); }
.tag-chinese { background: rgba(210,105,79,.12); color: var(--chinese); }
.tag-english { background: rgba(122,102,184,.12); color: var(--english); }