@import "tailwindcss";

:root {
  --bg-canvas: #f6f1e8;
  --bg-canvas-strong: #efe5d7;
  --bg-elevated: rgba(255, 250, 243, 0.86);
  --surface: #fffaf2;
  --surface-muted: #f3ece1;
  --surface-strong: #fffdf8;
  --shell: #1e2724;
  --shell-muted: #7d8a80;
  --shell-border: rgba(242, 237, 229, 0.12);
  --ink-strong: #23303a;
  --ink: #2f352f;
  --ink-muted: #6a645a;
  --ink-faint: #8f8576;
  --accent-primary: #6e7f52;
  --accent-primary-strong: #5d6b46;
  --accent-ink: #f8f5ef;
  --accent-ring: rgba(110, 127, 82, 0.3);
  --accent-soft: rgba(110, 127, 82, 0.14);
  --border-soft: rgba(99, 87, 71, 0.16);
  --border-strong: rgba(82, 71, 57, 0.24);
  --shadow-shell: 0 28px 80px rgba(47, 38, 28, 0.12);
  --shadow-card: 0 18px 40px rgba(62, 46, 27, 0.08);
  --font-sans:
    "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "SF Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background:
    radial-gradient(circle at top, rgba(229, 214, 190, 0.9), transparent 42%),
    linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-canvas-strong) 100%);
}

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent-soft);
}