/* ============================================================
   TINA MA PORTFOLIO — DESIGN SYSTEM
   唯一事实源：Tokens（变量）+ 组件 + 工具类
   ------------------------------------------------------------
   规则：所有页面必须最先引用本文件；
   新页面/组件只允许使用这里的变量与组件类，
   禁止硬编码颜色、字号、间距。
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* ---- 颜色 ---- */
  --bg-primary: #0a0a0b;
  --bg-secondary: #0d0d10;
  --bg-elevated: #121218;
  --bg-hero: #131316;   /* 首页 hero 区域背景（略浅于 --bg-primary） */
  --text-primary: #f4f4f5;
  --text-secondary: #8a8a93;
  --text-body: #c9c9cf;
  --line: rgba(255, 255, 255, 0.09);
  --accent: #002fa7;          /* Klein Blue — 色块/大面积 */
  --accent-bright: #3d63ff;   /* 深色底上的文字/高亮 */
  --accent-soft: rgba(61, 99, 255, 0.55);
  --accent-tint: rgba(61, 99, 255, 0.12);   /* hover 背景/淡填充 */
  --accent-glow-soft: rgba(61, 99, 255, 0.45);  /* 柔光/阴影 */
  --accent-glow: rgba(61, 99, 255, 0.7);     /* 强光 */
  --success: #4ade80;
  --warning: #f5c542;
  --danger: #ff6b6b;
  --muted: var(--text-secondary); /* 向后兼容别名，新代码用 --text-secondary */

  /* ---- 语义 tokens（浅色主题在下方 [data-theme="light"] 覆盖） ---- */
  --surface-hover: rgba(255, 255, 255, 0.025);
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --on-accent: #ffffff;
  --cursor-ring: rgba(255, 255, 255, 0.35);
  --nav-bg: #000000;   /* 顶部胶囊导航：纯黑 */

  /* ---- 字体 ---- */
  --font-display: 'Inter Tight', 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
  --font-body: 'Inter', 'PingFang SC', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --mono: var(--font-mono); /* 向后兼容别名，新代码用 --font-mono */

  --font-size-hero: clamp(3.2rem, 12.5vw, 12rem);
  --font-size-cta: clamp(2.6rem, 9vw, 8.5rem);
  --font-size-h1: clamp(2.6rem, 8vw, 7.5rem);
  --font-size-h2: clamp(2rem, 4vw, 4.5rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.75rem);
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-mono: 0.65rem;

  /* ---- 间距 ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  /* ---- 圆角 ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- 阴影 ---- */
  --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 24px 70px -24px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 30px 90px -24px rgba(0, 47, 167, 0.55);

  /* ---- 版心 ---- */
  --container-max: 1280px;
  --container-pad: 1.5rem;

  /* ---- 动效 ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.3s;
  --duration-med: 0.6s;
  --duration-slow: 1.1s;
}

@media (min-width: 768px) {
  :root { --container-pad: 3rem; }
}

/* ============================================================
   1.1 浅色主题（works.html 等内页）
   原则：浅底深字的近似反相；accent 不变，浅底上文字高亮用深蓝
   ============================================================ */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hero: var(--bg-primary);
  --text-primary: #0a0a0b;
  --text-body: #3a3a40;
  --text-secondary: #6b6b72;
  --line: rgba(10, 10, 11, 0.12);
  --accent-bright: #002fa7;
  --accent-soft: rgba(0, 47, 167, 0.35);
  --accent-tint: rgba(0, 47, 167, 0.08);
  --accent-glow-soft: rgba(0, 47, 167, 0.3);
  --accent-glow: rgba(0, 47, 167, 0.5);
  --surface-hover: rgba(10, 10, 11, 0.04);
  --surface-subtle: rgba(10, 10, 11, 0.06);
  --cursor-ring: rgba(10, 10, 11, 0.3);
  --nav-bg: rgba(255, 255, 255, 0.4);
  --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 24px 70px -24px rgba(0, 0, 0, 0.28);
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

/* ============================================================
   3. 组件
   ============================================================ */

/* ---- 版心容器 ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- 卡片 ---- */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition:
    transform var(--duration-med) var(--ease-smooth),
    box-shadow var(--duration-med) var(--ease-smooth),
    border-color var(--duration-med) var(--ease-smooth);
}
.card:hover {
  background: rgba(0,47,167,0.04);
}

/* ---- 按钮（三变体） ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  font-weight: 500;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-bright); }
.btn-secondary { background: transparent; color: var(--accent-bright); border-color: var(--accent-soft); }
.btn-secondary:hover { background: rgba(0, 47, 167, 0.12); }
.btn-text {
  background: none;
  border: none;
  color: var(--text-primary);
  padding-inline: 0;
  border-radius: 0;
}
.btn-text:hover { color: var(--accent-bright); }

/* ---- 区块标题 ---- */
.section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: var(--space-sm);
}

/* ---- 标签 ---- */
.tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.tag-accent { color: var(--accent-bright); background: rgba(61, 99, 255, 0.14); }
.tag-danger { color: var(--danger); background: rgba(255, 107, 107, 0.13); }
.tag-warning { color: var(--warning); background: rgba(245, 197, 66, 0.13); }
.tag-success { color: var(--success); background: rgba(74, 222, 128, 0.12); }
.tag-neutral { color: var(--text-secondary); background: var(--surface-subtle); }

/* ---- 数据表格 ---- */
.dtable-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.dtable { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--font-size-small); }
.dtable th {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.dtable td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
  color: var(--text-body);
  line-height: 1.75;
  vertical-align: top;
}
.dtable tr:last-child td { border-bottom: none; }
.dtable tbody tr { transition: background var(--duration-fast) ease; }
.dtable tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.dtable .src { font-family: var(--font-mono); font-size: var(--font-size-mono); color: var(--text-secondary); white-space: nowrap; }
.dtable .row-neg td { background: rgba(255, 107, 107, 0.05); }
.dtable .row-pos td { background: rgba(74, 222, 128, 0.05); }

/* ---- 提示横幅 ---- */
.banner-warning {
  background: rgba(245, 197, 66, 0.08);
  border: 1px solid rgba(245, 197, 66, 0.32);
  color: var(--warning);
  border-radius: var(--radius-md);
}
.banner-success {
  background: rgba(74, 222, 128, 0.07);
  border: 1px solid rgba(74, 222, 128, 0.28);
  color: var(--success);
  border-radius: var(--radius-md);
}

/* ---- 进度条成功态 ---- */
.bar-fill.success { background: var(--success); }

/* ---- 浮动胶囊导航（首页全量 / 内页 mini） ---- */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.55rem var(--space-sm);
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.nav-pill--mini { padding: 0.45rem 1rem; gap: var(--space-xs); }

.nav-avatar {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
}

/* ---- 在线状态点 ---- */
.status-dot {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--success);
  animation: statusPulse 2.4s ease-out infinite;
}
@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---- 标签 pill ---- */
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
/* hover 反馈只给可点击的 pill（a/button）；纯装饰 span.pill 不变色 */
a.pill:hover, button.pill:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* ---- 筛选 pill（激活态前景/背景互反，深浅主题通用） ---- */
.filter-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.filter-pill .count {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}
.filter-pill:hover { border-color: var(--text-primary); }
.filter-pill.is-active { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }
.filter-pill.is-active .count { color: var(--bg-primary); opacity: 0.6; }

/* ---- 计数胶囊（轮播 01 / 03） ---- */
.count-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  letter-spacing: 0.15em;
  color: var(--text-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.85rem;
  white-space: nowrap;
}

/* ---- 超大描边字列表行（hover 填充） ---- */
.outline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--line);
}
.outline-row .outline-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-out);
}
@media (min-width: 768px) {
  .outline-row .outline-title { font-size: 2.25rem; }
}
.outline-row:hover .outline-title { color: var(--accent-bright); }
.outline-row:hover p { opacity: 0.15; transition: opacity .3s ease; }
.outline-row p { transition: opacity .3s ease; }

/* ---- 幽灵大序号（Experience 章节编号） ---- */
.ghost-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  color: var(--text-primary);
  opacity: 0.14;
}

/* ---- 圆形悬浮按钮（卡片 hover 浮出） ---- */
.circle-btn {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  z-index: 5;
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: var(--text-primary);
  color: var(--bg-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transform: scale(0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--duration-fast) var(--ease-smooth),
    opacity var(--duration-fast) ease;
}

/* ============================================================
   4. 工具类
   ============================================================ */
/* 参考站英文风格：Inter Tight + 常规字重（400），覆盖 Tailwind 的 font-bold/font-medium/font-semibold */
.font-display, .font-display * { font-family: var(--font-display); font-weight: 400 !important; }
.font-mono { font-family: var(--font-mono); }
.text-accent { color: var(--accent-bright); }
.bg-accent { background-color: var(--accent); }
.text-muted { color: var(--text-secondary); }
.hairline { border-color: var(--line); }

/* 旧语义色别名（向后兼容既有 HTML，新代码请用 .tag-* 变体） */
.tag-blue { color: var(--accent-bright); background: rgba(61, 99, 255, 0.14); }
.tag-red { color: var(--danger); background: rgba(255, 107, 107, 0.13); }
.tag-yellow { color: var(--warning); background: rgba(245, 197, 66, 0.13); }
.tag-green { color: var(--success); background: rgba(74, 222, 128, 0.12); }
.tag-gray { color: var(--text-secondary); background: var(--surface-subtle); }