/* ============================================================================
 * 墨核 AI · Design Tokens（Phase 1）
 * 主色方案：墨核青 —— 墨黑底 + 青碧主色 + 朱砂点缀（用户拍板）
 * 依据：docs/DESIGN-Phase1-设计方向与页面提示词.md §6
 *
 * 【P0】硬规则（违反即退回）：
 *   - 禁止硬编码 hex（唯一例外 #fff / #000）—— 一律 var(--token)
 *   - 禁止紫→粉渐变（--grad 必须是纯色，见下方「兼容别名」段）
 *   - 实青底 --accent-strong 上必须用深墨字 --on-accent（#14B8A6 上白字仅 2.5:1，不达标）
 *   - 圆角上限 18px；禁止「1px 边框 + blur≥16px 阴影」同元素
 * ========================================================================== */

:root {
  /* ===== A1 Surface 表面（亮度递进，非纯黑） ===== */
  --bg:            #0A0E15;   /* 墨黑（微蓝调，不是 #000） */
  --surface:       #111725;   /* 卡片 / 面板 */
  --surface-2:     #18202F;   /* 三级表面：折叠体、hover、斑马行 */

  /* ===== A1 Foreground 前景 ===== */
  --fg:            #E8EEF7;   /* 主文本 — 对 bg 16.6:1 (AAA) */
  --fg-2:          #C3CDDD;   /* 次级文本 */
  --muted:         #94A3B8;   /* 副文本 — 对 bg 7.6:1 (AAA) */
  --meta:          #6B7A93;   /* 三级 / 时间戳 */

  /* ===== A1 Border 边框 ===== */
  --border:        #232C3D;
  --border-soft:   rgba(148, 163, 184, .08);

  /* ===== A1 Accent 强调色（青碧）===== */
  --accent:        #2DD4BF;   /* 亮青：深色底上的文字/图标/描边/进度 — 对 bg 10.4:1 */
  --accent-strong: #14B8A6;   /* 实青：实心按钮底（配 --on-accent 墨字） */
  --accent-hover:  #5EE0D0;
  --accent-active: #0D9488;
  --accent-dim:    rgba(45, 212, 191, .12);   /* 选中项背景 */
  --on-accent:     #052220;   /* 实青底上的前景（深墨，非白）— 6.7:1 */

  /* ===== A1 Fonts 字体（系统栈，无 CDN / 无构建）===== */
  --font-display: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body:    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* ===== A2 Semantic 语义色 ===== */
  --success: #34D399;   /* 翠绿 */
  --warn:    #F5B445;   /* 琥珀 */
  --danger:  #E05A4F;   /* 朱砂 — 危险/删除/错误 */
  --info:    #6BA8FF;   /* 信息蓝（仅中性提示，不作强调色） */
  --gold:    #F5C451;   /* 付费档 / VIP / 余额（沿用现有资产） */
  --gold-deep: #D8A02E;  /* 金色深调 — 金色 CTA 渐变用（金→亮金属，合规） */
  --on-gold:  #2B1F05;   /* 金底上的前景（深褐墨，保证对比度，非纯黑） */
  --focus-ring: 0 0 0 3px rgba(45, 212, 191, .35);

  /* ===== A2 Spacing（4px 网格）===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ===== A2 Radius（上限 18px，禁止 ≥24px）===== */
  --radius-sm: 6px;      /* chip / badge */
  --radius-md: 10px;     /* 按钮 / 输入框 */
  --radius-lg: 14px;     /* 卡片 */
  --radius-xl: 18px;     /* 弹窗 */
  --radius-pill: 9999px;

  /* ===== A2 Elevation（3 级，禁止幽灵卡片）===== */
  --elev-flat:    none;
  --elev-ring:    0 0 0 1px var(--border);
  --elev-raised:  0 8px 24px rgba(0, 0, 0, .45);
  --elev-overlay: 0 24px 64px rgba(0, 0, 0, .6);

  /* ===== A2 Typography ===== */
  --text-xs: 12px;  --text-sm: 13px;  --text-base: 14px; --text-md: 15px;
  --text-lg: 16px;  --text-xl: 18px;  --text-2xl: 20px;  --text-3xl: 24px;
  --text-4xl: 32px;
  --leading-body: 1.7; --leading-tight: 1.3; --leading-compact: 1.5;
  --weight-read: 400; --weight-emphasize: 500; --weight-announce: 600; --weight-strong: 700;

  /* ===== A2 Motion（150ms 是跨系统收敛值）===== */
  --motion-instant: 80ms; --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== A2 Layout ===== */
  --container-max: 1100px;
  --gutter: 20px;
  --section-y-desktop: 32px;
  --section-y-mobile: 20px;

  /* ===== A2 Icon ===== */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;

  /* ===== A2 Z-index（语义层级，禁止随意 z-50）===== */
  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100;
  --z-modal: 1200; --z-toast: 1300; --z-lightbox: 1400;
}

/* ============================================================================
 * 注意 兼容期别名 —— 让存量 index.html 的旧变量指向新 token。
 *    第 2/3 批随功能改造逐步删除本段（DESIGN §6.6）。
 * ========================================================================== */
:root {
  --ink:  var(--fg);
  --ink2: var(--muted);
  --ink3: var(--meta);
  --bg0:  var(--bg);
  --bg1:  var(--surface);
  --card: var(--surface-2);
  --bd:   var(--border);
  --field-bg: var(--surface);   /* 下拉选项 / 代码块等的输入面底色 */
  --blue:   var(--accent);
  --violet: var(--accent);        /* 【P0】原紫色，本期必须清掉 */
  --cyan:   var(--accent);
  --green:  var(--success);
  --rose:   var(--danger);
  /* 【ROI 最高的一行】渐变 → 纯色：这一处让全站约 20 处按钮/卡片/tab 立刻脱离蓝紫渐变 */
  --grad:   var(--accent-strong);
}

/* ============================================================================
 * 图标基础样式（配合 js/icons.js）
 * ========================================================================== */
.ti {
  display: inline-block;
  width: 1em; height: 1em;
  stroke: currentColor;      /* 颜色继承父级，绝不硬编码 */
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  flex: none;
}
.ti-16 { width: var(--icon-sm); height: var(--icon-sm); }
.ti-20 { width: var(--icon-md); height: var(--icon-md); }
.ti-24 { width: var(--icon-lg); height: var(--icon-lg); }
.ti-32 { width: var(--icon-xl); height: var(--icon-xl); }
.ti-empty { opacity: 0; }              /* 未知图标：占位但不可见 */
.ti-fill { fill: currentColor; }

/* L3 字形标记：方形容器内 1~2 个汉字（受控降级，不是 emoji） */
.ti-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em;
  font-size: .78em; font-weight: 700; line-height: 1;
  border: 1.5px solid currentColor; border-radius: var(--radius-sm);
  vertical-align: -0.16em; flex: none; letter-spacing: 0;
}

/* ============================================================================
 * 无障碍：焦点环 + 减弱动效（DESIGN §11.5）
 * ========================================================================== */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}