/* ============================================================
   闲啄白酒 — Tokens & Reset
   Token spine lives at .ui-craft/tokens.md
   ============================================================ */

:root {
  /* ----- Brand ----- */
  --main: #5BB097;
  --main-deep: #2F846D;
  --accent-orange: #C97B4A;
  --accent-blue: #5B8FB9;

  /* ----- Neutral ramp ----- */
  --ink: #1a1a1a;
  --ink-2: #3d3d3d;
  --ink-3: #5a5a5a;
  --ink-4: #8a8a8a;
  --ink-5: #c4c4c4;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --surface-3: #eef4f1;
  --border: #e2efe9;

  /* ----- Semantic ----- */
  --success: var(--main);
  --warning: var(--accent-orange);
  --danger: #c25555;

  /* ----- Spacing (4/8 scale) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ----- Radius (varied, not uniform) ----- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ----- Shadow (ambient + direct) ----- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 16px rgba(47, 132, 109, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 48px rgba(47, 132, 109, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ----- Layout ----- */
  --container-max: 1200px;
  --container-pad: 24px;
  --topbar-h: 64px;
}

@media (min-width: 768px) {
  :root { --container-pad: 40px; }
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  background: var(--surface);
}

::selection { background: var(--main); color: #fff; }

/* focus ring — keyboard a11y */
:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 3px;
  border-radius: 4px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}