/* ═══════════════════════════════════════════════════════════════
   aceworld.top — 设计令牌系统 (Design Tokens)
   版本: v2.0 | 基于 CSS Custom Properties
   设计语言: Linear 极客理性 × Apple 美术大师
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── 背景色系 (5级暗色深度) ─── */
  --bg-deep:       #08090a;   /* 最深底 — Hero、时间线 */
  --bg-panel:      #0f1011;   /* 内容面板 — 关于我、能力 */
  --bg-surface:    #191a1b;   /* 卡片面 — 团队、Skills */
  --bg-elevated:   #28282c;   /* 浮起态 — hover、弹窗 */
  --bg-card:       rgba(255, 255, 255, 0.04); /* 半透明卡片 */

  /* ─── 文字色系 (4级) ─── */
  --text-primary:    #f7f8f8;   /* 主标题、关键信息 */
  --text-secondary:  #d0d6e0;   /* 正文、描述 */
  --text-tertiary:   #8a8f98;   /* 辅助信息、标签 */
  --text-quaternary: #62666d;   /* 时间戳、极弱文本 */

  /* ─── 品牌色 & 交互色 ─── */
  --brand-primary:   #5e6ad2;   /* 靛蓝紫主色 — CTA 按钮、选中态 */
  --brand-accent:    #7170ff;   /* 交互强调 — 链接、焦点环 */
  --brand-hover:     #828fff;   /* hover 变亮 */
  --brand-warm:      #f59e0b;   /* 暖色辅助 — 玄学/六爻点缀 */
  --brand-success:   #34d399;   /* 成功态 */
  --brand-warning:   #fbbf24;   /* 警告态 */
  --brand-error:     #f87171;   /* 错误态 */

  /* ─── 边框系统 ─── */
  --border-subtle:   rgba(255, 255, 255, 0.05);  /* 极弱分割 */
  --border-standard: rgba(255, 255, 255, 0.08);  /* 默认组件边框 */
  --border-visible:  #23252a;                     /* 需要可见的分割 */
  --border-hover:    rgba(255, 255, 255, 0.14);   /* hover 增强 */
  --border-active:   rgba(94, 106, 210, 0.5);     /* 选中态边框 */

  /* ─── 字体系统变量 ─── */
  --font-sans:  'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
                'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                'SF Mono', 'Menlo', monospace;
  --font-cjk:   'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei',
                'Hiragino Sans GB', 'STHeiti', sans-serif;

  /* 字重 (Inter Variable 支持连续字重 100–900) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   510;   /* Inter Variable 独有 — 主要强调 */
  --weight-semibold: 590;
  --weight-bold:     700;

  /* 排版层级 */
  --text-display:     48px;    /* 大标题 */
  --text-h1:          32px;    /* 章节标题 */
  --text-h2:          24px;    /* 子标题 */
  --text-h3:          20px;    /* 卡片标题 */
  --text-body:        16px;    /* 正文 */
  --text-body-sm:     15px;    /* 次要文本 */
  --text-caption:     13px;    /* 标签 */
  --text-label:       12px;    /* 小标签 */

  /* 行高 */
  --leading-display:  1.00;
  --leading-h1:       1.13;
  --leading-h2:       1.33;
  --leading-h3:       1.33;
  --leading-body:     1.50;
  --leading-sm:       1.60;
  --leading-caption:  1.50;
  --leading-label:    1.40;

  /* 字间距 */
  --tracking-display: -0.022em;   /* -1.056px @ 48px */
  --tracking-h1:      -0.022em;   /* -0.704px @ 32px */
  --tracking-h2:      -0.012em;   /* -0.288px @ 24px */
  --tracking-h3:      -0.012em;   /* -0.24px @ 20px */
  --tracking-body:    normal;
  --tracking-sm:      -0.011em;   /* -0.165px @ 15px */
  --tracking-caption: -0.01em;    /* -0.13px @ 13px */
  --tracking-label:   normal;

  /* ─── 间距系统 (8px 基础单元) ─── */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   12px;
  --space-6:   16px;
  --space-7:   20px;
  --space-8:   24px;
  --space-9:   32px;
  --space-10:  40px;
  --space-11:  48px;
  --space-12:  64px;
  --space-13:  80px;
  --space-14:  100px;
  --space-15:  120px;
  --space-16:  160px;

  /* 语义化间距 */
  --section-gap:     var(--space-14);   /* 100px section 间距 */
  --section-gap-sm:  var(--space-12);   /* 64px */
  --card-padding:    var(--space-8);    /* 24px */
  --card-gap:        var(--space-8);    /* 24px */
  --nav-height:      64px;

  /* ─── 圆角系统 ─── */
  --radius-none:  0;
  --radius-sm:    4px;     /* 小标签、toolbar */
  --radius-md:    6px;     /* 按钮、输入框 */
  --radius-lg:    8px;     /* 卡片 */
  --radius-xl:    12px;    /* 展示卡片、大面板 */
  --radius-pill:  9999px;  /* 徽章、过滤器、品牌 pill */

  /* ─── 动效系统变量 ─── */

  /* 缓动曲线 — Linear 的 "energetic" 曲线 */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:  linear;

  /* 动效时长 */
  --duration-instant:  100ms;
  --duration-fast:     200ms;   /* 微交互 */
  --duration-normal:   300ms;
  --duration-page:     400ms;   /* 页面过渡 */
  --duration-slow:     600ms;   /* 大场景 */
  --duration-glacial:  1000ms;

  /* 载入错开 */
  --stagger-delay:     100ms;   /* 逐元素载入间隔 */

  /* ─── 深度 / 阴影变量 ─── */
  --shadow-card:    0px 0px 0px 1px rgba(0, 0, 0, 0.2);
  --shadow-elevated: 0px 2px 8px rgba(0, 0, 0, 0.25),
                     0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  --shadow-floating: 0px 8px 32px rgba(0, 0, 0, 0.4),
                     0px 2px 8px rgba(0, 0, 0, 0.2),
                     0px 0px 0px 1px rgba(255, 255, 255, 0.06);
  --shadow-overlay:  0px 16px 48px rgba(0, 0, 0, 0.55);

  /* ─── 毛玻璃 ─── */
  --glass-bg:      rgba(8, 9, 10, 0.82);
  --glass-blur:    20px;
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-shadow:  0px 1px 0px rgba(255, 255, 255, 0.04) inset;

  /* ─── 响应式断点 (作为 CSS 变量供 JS 引用) ─── */
  --bp-desktop:  1024px;
  --bp-tablet:   768px;
  --bp-mobile:   480px;

  /* ─── Z-Index 层级 ─── */
  --z-particles:  0;
  --z-content:    1;
  --z-nav:        100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-toast:      400;

  /* ─── 通用 ─── */
  --content-max-width: 1200px;
  --content-narrow:    720px;
}

/* ─── 响应式排版调整 ─── */
@media (max-width: 1024px) {
  :root {
    --text-display: 40px;
    --text-h1:      28px;
    --text-h2:      22px;
  }
}

@media (max-width: 768px) {
  :root {
    --text-display: 32px;
    --text-h1:      26px;
    --text-h2:      20px;
    --text-h3:      18px;
    --section-gap:  var(--space-12);   /* 64px */
    --section-gap-sm: var(--space-11); /* 48px */
  }
}

@media (max-width: 480px) {
  :root {
    --text-display: 28px;
    --text-h1:      24px;
    --text-h2:      19px;
    --text-body:    15px;
    --section-gap:  var(--space-11);   /* 48px */
    --section-gap-sm: var(--space-10); /* 40px */
  }
}