/* ============================================
   tokens.css —— 设计变量系统
   自然色系，8倍递增间距，克制动效
   ============================================ */

:root {
  /* —— 背景色 —— */
  --bg-base: #FAFAFA;            /* 主背景，近白 */
  --bg-elevated: #FFFFFF;        /* 卡片、浮层背景 */
  --bg-surface: #F5F5F5;         /* 次级背景 */
  --bg-faint: #F0F7F0;           /* 微绿底色 */

  /* —— 绿色系 —— */
  --green-lightest: #E8F5E9;     /* 最浅绿，大区块背景 */
  --green-light: #C8E6C9;        /* 浅绿，边框、分割线 */
  --green-mid: #A5D6A7;          /* 中绿，次要元素 */
  --green-accent: #81C784;       /* 强调色，按钮、链接 */
  --green-deep: #66BB6A;         /* 深绿，hover状态 */

  /* —— 文字色 —— */
  --text-primary: #1B2E1B;       /* 主文字，深绿黑 */
  --text-secondary: #4A6A4A;     /* 次文字 */
  --text-muted: #8FA88F;         /* 弱文字，日期、注释 */
  --text-faint: #B8CCB8;         /* 极弱文字，提示 */

  /* —— 边框 —— */
  --border-light: rgba(129, 199, 132, 0.15);
  --border-mid: rgba(129, 199, 132, 0.25);

  /* —— 阴影 —— */
  --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 12px 48px rgba(0, 0, 0, 0.06);

  /* —— 字体栈 —— */
  --font-body: 'Inter', 'PingFang SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', 'PingFang SC', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* —— 字号层级 —— */
  --fs-hero: clamp(2.5rem, 6vw, 4rem);
  --fs-h1: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h2: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* —— 字重 —— */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* —— 行高 —— */
  --lh-tight: 1.4;
  --lh-body: 1.8;
  --lh-relaxed: 2;

  /* —— 字距 —— */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
  --ls-widest: 0.2em;

  /* —— 间距（8倍递增）—— */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;
  --space-5: 120px;
  --space-6: 200px;

  /* —— 圆角 —— */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* —— 动效 —— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --fade-duration: 800ms;
  --hover-duration: 200ms;

  /* —— 布局 —— */
  --page-padding: clamp(20px, 5vw, 80px);
  --content-max: 1080px;
  --content-narrow: 680px;
}