/**
 * 设计令牌（Design Tokens）—— 全站唯一的样式变量来源。
 * 改主题只需调整本文件，组件与章节样式不写死颜色与尺寸。
 */

:root {
  /* ===== 品牌色 ===== */
  --brand: #0f766e;
  --brand-strong: #0b5d56;
  --brand-soft: #d5f2ee;
  --brand-glow: rgba(15, 118, 110, 0.18);

  --accent: #f59e0b;
  --accent-soft: #fef3c7;

  --success: #16a34a;
  --success-soft: #dcfce7;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --info: #2563eb;
  --info-soft: #dbeafe;

  /* ===== 中性色 ===== */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;

  --surface: #ffffff;
  --surface-muted: #f6f9fb;
  --surface-dark: #0b1a24;

  /* ===== 排版 ===== */
  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;

  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-base: 1.75;

  /* ===== 间距 ===== */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ===== 圆角 ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ===== 阴影 ===== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 12px 32px var(--brand-glow);

  /* ===== 动效 ===== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ===== 布局 ===== */
  --container: 1200px;
  --header-h: 72px;

  /* ===== 层级 ===== */
  --z-header: 100;
  --z-backtop: 90;
  --z-modal: 200;

  /* ============================================================
     极光壁纸（玻璃的「被折射对象」）
     玻璃本身不产生视觉，必须有背后高频多色结构，折射与模糊才可见。
     配色沿用品牌 teal 向薄荷、天蓝、淡紫过渡，保持专业感。
     ============================================================ */
  --aurora-1: #8fe3d2;          /* 左上：薄荷青 */
  --aurora-2: #a5d4ff;          /* 右上：天蓝 */
  --aurora-3: #b7f0c8;          /* 右下：浅草绿 */
  --aurora-4: #cfd3ff;          /* 左下：淡紫蓝 */
  /* 底层洗染渐变（四角渐变之下的连续色带） */
  --aurora-w1: #cfe9f5;
  --aurora-w2: #d6f2e6;
  --aurora-w3: #dcd9f7;
  --aurora-w4: #cdeee4;
  --aurora-base: #eef4f6;       /* 兜底底色 */
  --aurora-blur: 22px;
  --aurora-saturate: 165%;

  /* ============================================================
     玻璃材质
     .glass 为外层玻璃（含 backdrop-filter）；
     .glass-panel 为内层面板，**不叠加 backdrop-filter** —— 滤镜相乘会
     让嵌套层级迅速糊成一片，这是玻璃风格最常见的翻车点。
     ============================================================ */
  --glass-bg: rgba(255, 255, 255, 0.56);
  --glass-border: rgba(255, 255, 255, 0.78);
  --glass-radius: 1.7rem;
  --glass-blur: 14px;
  --glass-saturate: 180%;

  --glass-panel-bg: rgba(255, 255, 255, 0.66);
  --glass-panel-border: rgba(255, 255, 255, 0.6);
  --glass-panel-radius: 1rem;

  /* 深色玻璃：用于深色区块内的卡片与导航（叠在已变暗的承托层上，故可不透明度较低） */
  --glass-dark-bg: rgba(10, 42, 48, 0.42);
  --glass-dark-solid: rgb(10, 42, 48);
  --glass-dark-border: rgba(255, 255, 255, 0.18);

  /**
   * 大面积深色承托层（区块 / 页脚）。
   * ⚠️ 不能直接用 --glass-dark-bg：后者仅 42% 不透明，叠在**亮色极光**之上时
   * 实际底色会泛白，浅色文字对比度不足（可读性事故）。大面积区域必须用这层更实的
   * 遮罩把极光压暗，再在其上放 42% 的深色玻璃卡片（.glass-dark）形成层次。
   */
  --glass-dark-veil: rgba(10, 42, 48, 0.82);

  /* 玻璃高光体系：顶部高光 / 内描边 / 内发光 / 外投影 */
  --glass-hi-top: rgba(255, 255, 255, 0.95);
  --glass-hi-ring: rgba(255, 255, 255, 0.55);
  --glass-hi-glow: rgba(255, 255, 255, 0.30);
  --glass-shadow: 0 16px 46px rgba(40, 60, 100, 0.20);
  --glass-shadow-dark: 0 16px 46px rgba(6, 24, 30, 0.34);
  --glass-shadow-hover: 0 22px 60px rgba(40, 60, 100, 0.26);
}

/* 深色区块内的局部令牌覆盖 */
.section-dark {
  --ink-900: #f1f5f9;
  --ink-800: #e2e8f0;
  --ink-700: #cbd5e1;
  --ink-600: #94a3b8;
  --ink-500: #94a3b8;
  --ink-200: rgba(255, 255, 255, 0.14);
  --ink-100: rgba(255, 255, 255, 0.08);
  --surface: rgba(255, 255, 255, 0.05);
}