/* ============================================================
   tokens.css — 立大志 wysj 设计令牌（色板 / 字号 / 间距 / 圆角 / 阴影）
   品牌色基线：富金 #C5A24D + 玄黑 #0A0A0A + 暖白 #F4EADE
   单位规范：8 点网格（4 / 8 / 16 / 24 / 32 / 48 / 64 / 96px）
   ============================================================ */
:root {
  /* ===== 主色 · 富金 ===== */
  --gold-primary: #C5A24D;
  --gold-deep:    #B8860B;
  --gold-light:   #D4B870;
  --gold-pale:    #F0E6CC;
  --gold-tint-08: rgba(197, 162, 77, 0.08);
  --gold-tint-12: rgba(197, 162, 77, 0.12);
  --gold-tint-25: rgba(197, 162, 77, 0.25);
  --gold-tint-40: rgba(197, 162, 77, 0.40);

  /* ===== 主色 · 玄黑 ===== */
  --black-pure:   #0A0A0A;
  --black-soft:   #1C1C1C;
  --black-text:   #2C2C2C;
  --gray-900: #1F1F1F;
  --gray-700: #4A4A4A;
  --gray-500: #888888;
  --gray-300: #D4D4D4;
  --gray-100: #F2F2F2;

  /* ===== 中性 · 暖白 ===== */
  --white-pure:  #FFFFFF;
  --white-warm:  #FAF7F2;
  --white-ivory: #F4EADE;

  /* ===== 功能色 ===== */
  --success: #4A7C59;
  --warning: #C5871D;
  --error:   #A23B3B;
  --info:    #4A6A8C;

  /* ===== 兼容旧 class 名（仅向后兼容，新组件勿用） ===== */
  --yellow:        var(--gold-primary);
  --yellow-bright: var(--gold-light);
  --yellow-dark:   var(--gold-deep);
  --yellow-light:  var(--gold-pale);
  --yellow-ultra:  var(--white-ivory);
  --white:         var(--white-warm);
  --dark:          var(--black-pure);
  --mid:           var(--black-soft);
  --gray:          var(--gray-700);
  --light-gray:    var(--gray-100);
  --border:        var(--gray-300);

  /* ===== 字号阶梯（8 点对齐） ===== */
  --fs-hero: clamp(40px, 5vw, 64px);
  --fs-h1:   clamp(32px, 4vw, 48px);
  --fs-h2:   clamp(24px, 3vw, 32px);
  --fs-h3:   20px;
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;

  /* ===== 字重 ===== */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* ===== 行高 ===== */
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-base:   1.6;
  --lh-relax:  1.75;
  --lh-loose:  1.9;

  /* ===== 间距（8 点网格） ===== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ===== 圆角（克制直角化） ===== */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ===== 5 档电梯阴影 ===== */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-5: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow:   var(--shadow-2);
  --shadow-yellow: var(--shadow-3); /* 旧 class 兼容，去荧光 */

  /* ===== 渐变（保留兼容旧 class） ===== */
  --gradient-yellow: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-deep) 100%);
  --gradient-light:  linear-gradient(180deg, var(--white-ivory) 0%, var(--white-warm) 100%);
  --gradient-hero:   linear-gradient(135deg, var(--black-pure) 0%, var(--black-soft) 100%);

  /* ===== 容器宽度（三档 token） ===== */
  --container-narrow: 720px;   /* 长正文 */
  --container-base:   1080px;  /* 标准内容 */
  --container-wide:   1280px;  /* 全宽栅格 */

  /* ===== 布局结构 ===== */
  --nav-height-desktop: 64px;
  --nav-height-mobile:  56px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ===== 暗黑模式（自动跟随系统） ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --white-pure:  #1A1A1A;
    --white-warm:  #1F1C18;
    --white-ivory: #261F18;
    --gray-100: #2A2A2A;
    --gray-300: #3A3A3A;
    --gold-primary: #D4B870; /* 暗模式提亮古金 */
  }
}