/* =========================================================
   TokenHub · base.css
   设计令牌 / 重置 / 排版 / 栅格 / 亮暗主题
   品牌色取自 Logo：薄荷绿 #34D399 + 深色底 #151A21
   默认深色主题；用户可手动切换为亮色（data-theme="light"）
   ========================================================= */

:root {
  /* 品牌色（Logo 绿） */
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;   /* Logo 主绿 */
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-900: #236d57;   /* Logo 暗绿（感叹号竖条） */
  --ink: #151a21;         /* Logo 底色 */
  --accent-400: #5eead4;
  --accent-500: #2dd4bf;
  --accent-600: #0d9488;

  /* 语义色 */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #f87171;
  --info: #38bdf8;

  /* 表面与文字（默认：深色） */
  --bg: #0e1217;
  --bg-soft: #12171e;
  --bg-muted: #1a2029;
  --surface: #151a21;
  --surface-2: #1a2029;
  --border: #252d38;
  --border-strong: #323c4a;
  --text: #e9eef3;
  --text-2: #b4bfcc;
  --text-3: #8592a3;
  --text-inverse: #0e1217;
  --link: var(--brand-400);
  --primary: var(--brand-400);
  --primary-hover: #4ee0aa;
  --on-primary: #06281c;
  --primary-soft: rgba(52, 211, 153, .12);
  --primary-soft-text: var(--brand-300);
  --accent: var(--accent-500);
  --code-bg: #0b0f14;
  --code-text: #d7e3ee;
  --hero-grad: radial-gradient(1100px 520px at 15% -10%, rgba(52, 211, 153, .16), transparent 60%),
               radial-gradient(900px 480px at 95% 5%, rgba(45, 212, 191, .10), transparent 60%);
  --grad-brand: linear-gradient(135deg, #34d399 0%, #2dd4bf 100%);
  --grad-text: linear-gradient(90deg, #34d399 0%, #5eead4 100%);
  --cta-bg: radial-gradient(700px 260px at 85% 0%, rgba(52, 211, 153, .28), transparent 70%),
            radial-gradient(600px 260px at 0% 100%, rgba(45, 212, 191, .16), transparent 70%), #151a21;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号阶梯 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: clamp(28px, 3.4vw, 40px);
  --fs-4xl: clamp(34px, 5vw, 58px);

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* 圆角 / 阴影 */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(52, 211, 153, .4);

  /* 布局 */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);

  color-scheme: dark;
}

/* 亮色：手动切换 */
:root[data-theme="light"] {
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0284c7;
  --bg: #ffffff;
  --bg-soft: #f5f8f7;
  --bg-muted: #edf2f0;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --border: #e1e8e5;
  --border-strong: #c9d4d0;
  --text: #111820;
  --text-2: #3a4652;
  --text-3: #64717e;
  --text-inverse: #ffffff;
  --link: var(--brand-700);
  --primary: var(--brand-600);
  --primary-hover: var(--brand-700);
  --on-primary: #ffffff;
  --primary-soft: var(--brand-50);
  --primary-soft-text: var(--brand-700);
  --code-bg: #151a21;
  --hero-grad: radial-gradient(1100px 520px at 15% -10%, rgba(52, 211, 153, .18), transparent 60%),
               radial-gradient(900px 480px at 95% 5%, rgba(45, 212, 191, .12), transparent 60%);
  --grad-text: linear-gradient(90deg, #059669 0%, #0d9488 100%);
  --shadow-sm: 0 1px 2px rgba(17,24,32,.06);
  --shadow-md: 0 4px 16px rgba(17,24,32,.08);
  --shadow-lg: 0 18px 48px rgba(17,24,32,.12);
  --ring: 0 0 0 3px rgba(5, 150, 105, .35);
  color-scheme: light;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 1em; color: var(--text-2); }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-10) 0; }
code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
:not(pre) > code { background: var(--bg-muted); padding: .1em .4em; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(52, 211, 153,.3); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }

/* ---------- 布局 ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: calc(860px + var(--gutter) * 2); }
.section { padding: var(--sp-24) 0; }
.section-sm { padding: var(--sp-16) 0; }
.section-alt { background: var(--bg-soft); }
.section-head { max-width: 760px; margin: 0 auto var(--sp-12); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { font-size: var(--fs-md); color: var(--text-3); margin: 0; }
.eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); letter-spacing: .06em; margin-bottom: var(--sp-3); }
.text-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--text-3); }
.center { text-align: center; }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }

/* ---------- 断点：1024 / 768 / 480 ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: var(--sp-20) 0; }
}
@media (max-width: 768px) {
  :root { --gutter: 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section { padding: var(--sp-16) 0; }
  .section-sm { padding: var(--sp-12) 0; }
  .section-head { margin-bottom: var(--sp-8); }
  .section-head p { font-size: var(--fs-base); }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
}

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