/* ============================================================
   Design Tokens · 超级个体落地页
   - 不写选择器，只声明变量
   - 改主题 / 换字号体系时唯一改动入口
   - 命名规范: --{category}-{role}[-{variant}]
   ============================================================ */

:root {
  /* ============================================================
     1. COLOR · 颜色（语义命名，非色阶）
     ============================================================ */

  /* 背景层级（从底到顶） */
  --color-bg:           #0b0b0d;   /* 页面底色，近黑 */
  --color-surface:      #131316;   /* 卡片 / 区块底 */
  --color-surface-2:    #1b1b1f;   /* 浮起层 / hover */

  /* 文本层级 */
  --color-text:         #ededed;   /* 正文主色 */
  --color-text-muted:   #9a9a9e;   /* 次要文字 / 说明 / 标签 */
  --color-text-subtle:  #5a5a5e;   /* 极弱: 序号 / 装饰 */

  /* 强调色（金色系，传达高端付费课） */
  --color-accent:       #c9a96e;   /* 主强调，按钮 / 价格 / 描边 */
  --color-accent-soft:  #a8895a;   /* 弱化强调，hover 态 */

  /* 描边 */
  --color-border:        rgba(255, 255, 255, 0.08);   /* 默认极细分割线 */
  --color-border-strong: rgba(255, 255, 255, 0.16);   /* 卡片描边 */
  --color-border-gold:   rgba(201, 169, 110, 0.45);   /* 金色描边，结果 callout */

  /* 功能色 */
  --color-success:      #6fbf73;
  --color-overlay:      rgba(8, 8, 10, 0.78);          /* 弹层遮罩 */


  /* ============================================================
     2. TYPOGRAPHY · 字体（perfect fourth 1.333 比例）
     ============================================================ */

  /* 字号 */
  --fs-12:  12px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-22:  22px;
  --fs-28:  28px;
  --fs-38:  38px;
  --fs-52:  52px;
  --fs-72:  72px;
  --fs-104: 104px;     /* hero 主标专用 */

  /* 行高分级 */
  --lh-tight:  1.08;   /* 大标题 */
  --lh-snug:   1.18;   /* 小标题 / callout */
  --lh-normal: 1.55;   /* 正文 */
  --lh-relax:  1.75;   /* 长段落 / 引文 */

  /* 字重 */
  --fw-light:    300;  /* 序号 / 装饰数字 */
  --fw-regular:  400;  /* 标题主用 / 正文 */
  --fw-medium:   500;  /* 强调正文 */
  --fw-semibold: 600;  /* 按钮文字 / 关键数据 */

  /* 字族 */
  --ff-sans:   'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ff-serif:  'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --ff-mono:   'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* 字间距 */
  --ls-tight:  -0.02em;  /* 大标题收紧 */
  --ls-normal: 0;
  --ls-wide:   0.08em;   /* 全大写小标签 */
  --ls-mono:   0.04em;   /* 等宽序号 */


  /* ============================================================
     3. SPACING · 间距（8pt 网格）
     ============================================================ */

  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --sp-128: 128px;
  --sp-160: 160px;

  /* 响应式留白 */
  --pad-x:       clamp(24px, 5vw, 80px);      /* 页面左右安全边距 */
  --section-y:   clamp(112px, 14vh, 176px);   /* section 上下内边距 */
  --content-max: 1200px;                      /* 内容最大宽度 */


  /* ============================================================
     4. RADIUS · 圆角
     ============================================================ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;


  /* ============================================================
     5. SHADOW · 阴影（深色背景慎用，仅悬浮态）
     ============================================================ */

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 0 1px var(--color-accent), 0 12px 32px rgba(201, 169, 110, 0.18);


  /* ============================================================
     6. MOTION · 动效
     ============================================================ */

  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* 主用，自然减速 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);


  /* ============================================================
     7. Z-INDEX · 层级（语义命名）
     ============================================================ */

  --z-base:   1;
  --z-sticky: 10;
  --z-modal:  100;
  --z-toast:  200;
}


/* ============================================================
   断点常量（CSS 暂不支持变量在 @media 内，仅作注释参考；
   style.css 第 8 块 RESPONSIVE 使用相同数值硬编码）
   - 移动: <  640px
   - 平板: >= 640px
   - 桌面: >= 1024px
   - 宽屏: >= 1440px
   ============================================================ */