/*
 * Skarn UI — Core（核心：设计令牌 + 基础重置 + 排版）
 *
 * 文件分工（按引入顺序）：
 *   skarn-core.css        → 设计令牌、间距刻度、重置、排版
 *   skarn-grid.css        → 容器、12 列响应式网格
 *   skarn-components.css  → 全部组件
 *   skarn-utilities.css   → 全断点工具类
 *   skarn.js              → 交互脚本（defer 引入）
 *
 * 核心设计语言：中式传统色、绝对直角、温润弥散阴影、自动/手动亮暗模式
 * 使用说明：
 *   - 配色方案：在 <html> 上设置 data-palette="indigo"（默认）/ "bamboo" / "glaze" / "ink"
 *   - 默认跟随系统亮暗（prefers-color-scheme）
 *   - 手动覆盖：在 <html> 上设置 data-theme="dark" / "light"
 *   - 所有组件颜色与阴影一律通过 var(--skarn-xxx) 引用，禁止硬编码
 *   - 所有元素 border-radius 必须为 0（绝对直角）
 *   - class 遵循 BEM：skarn-组件__子元素--状态
 */

/* ================= 设计令牌 (Design Tokens) ================= */
/* 核心思想：极致留白（画布退底）。底色极度中性、去饱和，色彩仅用于"点染"视觉焦点。
 * 配色方案通过 <html data-palette> 切换：indigo 蓝靛（默认）/ bamboo 竹石 / glaze 琉璃 / ink 丹青。
 * 亮暗：默认跟随 prefers-color-scheme，设置 data-theme="light" 时锁定亮色。
 * 主色文字：亮色纯白，暗色深字（明暗翻转的克制对比）；仅丹青暗色主色压暗为深暖灰（保持焦墨气质）。 */

/* ---------- 1. 蓝靛 (Indigo) - 默认 ---------- */
:root,
:root[data-palette="indigo"] {
  color-scheme: light;
  --skarn-bg: #F7F8FA;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #1C1D1F;
  --skarn-text-muted: #7A7C82;
  --skarn-border: #E5E7EB;

  --skarn-primary: #22538F;
  --skarn-primary-hover: #193F6E;
  --skarn-secondary: #596B85;
  --skarn-success: #578274;
  --skarn-warning: #B38236;
  --skarn-danger: #9E3D3D;
  --skarn-on-primary: #FFFFFF;

  --skarn-switch-knob: var(--skarn-surface);
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
  --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 手动暗色（同时覆盖无 data-palette 与显式 indigo 两种写法）。 */
:root[data-theme="dark"],
:root[data-palette="indigo"][data-theme="dark"] {
  color-scheme: dark;
  --skarn-bg: #131416;
  --skarn-surface: #1C1D21;
  --skarn-text-main: #E4E5E8;
  --skarn-text-muted: #868991;
  --skarn-border: #33353A;

  --skarn-primary: #6796D1;
  --skarn-primary-hover: #85ADDF;
  --skarn-secondary: #778A9C;
  --skarn-success: #6A9887;
  --skarn-warning: #D6A252;
  --skarn-danger: #C96666;
  --skarn-on-primary: #0B1624;

  --skarn-switch-knob: var(--skarn-text-main);
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
  --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 系统暗色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root[data-palette="indigo"]:not([data-theme="light"]) {
    color-scheme: dark;
    --skarn-bg: #131416;
    --skarn-surface: #1C1D21;
    --skarn-text-main: #E4E5E8;
    --skarn-text-muted: #868991;
    --skarn-border: #33353A;
    --skarn-primary: #6796D1;
    --skarn-primary-hover: #85ADDF;
    --skarn-secondary: #778A9C;
    --skarn-success: #6A9887;
    --skarn-warning: #D6A252;
    --skarn-danger: #C96666;
    --skarn-on-primary: #0B1624;
    --skarn-switch-knob: var(--skarn-text-main);
    --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
    --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
    --skarn-overlay: rgba(0, 0, 0, 0.7);
    --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ---------- 2. 竹石 (Bamboo) ---------- */
:root[data-palette="bamboo"] {
  color-scheme: light;

  /* 画布：极弱的纸白与纯白，去除明显的绿意 */
  --skarn-bg: #F8F9F8;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #1C1E1D;
  --skarn-text-muted: #7A807D;
  --skarn-border: #E6E8E6;

  /* 点染：石绿保持原样 */
  --skarn-primary: #1E6553;
  --skarn-primary-hover: #164C3F;
  --skarn-secondary: #527067;
  --skarn-success: #7F9C62;
  --skarn-on-primary: #FFFFFF;

  /* 状态语义色：古色警示（琥珀 / 暗朱砂），低饱和不刺眼 */
  --skarn-warning: #B87A3D;
  --skarn-danger: #A63A3A;

  --skarn-switch-knob: var(--skarn-surface);
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
  --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-palette="bamboo"][data-theme="dark"] {
  color-scheme: dark;
  --skarn-bg: #131413;
  --skarn-surface: #1C1E1D;
  --skarn-text-main: #E4E6E4;
  --skarn-text-muted: #848A86;
  --skarn-border: #333634;

  --skarn-primary: #5DAA93;
  --skarn-primary-hover: #78BFAB;
  --skarn-secondary: #698B81;
  --skarn-success: #8CA473;
  --skarn-warning: #D99B5B;
  --skarn-danger: #D15E5E;
  --skarn-on-primary: #0A1C16;

  --skarn-switch-knob: var(--skarn-text-main);
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
  --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="bamboo"]:not([data-theme="light"]) {
    color-scheme: dark;
    --skarn-bg: #131413;
    --skarn-surface: #1C1E1D;
    --skarn-text-main: #E4E6E4;
    --skarn-text-muted: #848A86;
    --skarn-border: #333634;
    --skarn-primary: #5DAA93;
    --skarn-primary-hover: #78BFAB;
    --skarn-secondary: #698B81;
    --skarn-success: #8CA473;
    --skarn-warning: #D99B5B;
    --skarn-danger: #D15E5E;
    --skarn-on-primary: #0A1C16;
    --skarn-switch-knob: var(--skarn-text-main);
    --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
    --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
    --skarn-overlay: rgba(0, 0, 0, 0.7);
    --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ---------- 3. 琉璃 (Glaze) ---------- */
:root[data-palette="glaze"] {
  color-scheme: light;
  --skarn-bg: #FBF9F7;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #1F1D1C;
  --skarn-text-muted: #827E7A;
  --skarn-border: #EBE7E4;

  --skarn-primary: #B26D1E;
  --skarn-primary-hover: #8A5212;
  --skarn-secondary: #756554;
  --skarn-success: #6F7E5C;
  --skarn-warning: #C7822E;
  --skarn-danger: #A8432C;
  --skarn-on-primary: #FFFFFF;
}
:root[data-palette="glaze"][data-theme="dark"] {
  color-scheme: dark;
  --skarn-bg: #161514;
  --skarn-surface: #211E1C;
  --skarn-text-main: #E8E5E3;
  --skarn-text-muted: #8F8984;
  --skarn-border: #383431;

  --skarn-primary: #DCA052;
  --skarn-primary-hover: #E8B876;
  --skarn-secondary: #8F8171;
  --skarn-success: #8A9A74;
  --skarn-warning: #E29E4D;
  --skarn-danger: #D6674E;
  --skarn-on-primary: #261605;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="glaze"]:not([data-theme="light"]) {
    color-scheme: dark;
    --skarn-bg: #161514;
    --skarn-surface: #211E1C;
    --skarn-text-main: #E8E5E3;
    --skarn-text-muted: #8F8984;
    --skarn-border: #383431;
    --skarn-primary: #DCA052;
    --skarn-primary-hover: #E8B876;
    --skarn-secondary: #8F8171;
    --skarn-success: #8A9A74;
    --skarn-warning: #E29E4D;
    --skarn-danger: #D6674E;
    --skarn-on-primary: #261605;
  }
}

/* ---------- 4. 丹青 (Ink) - 强化焦墨对比与建筑感 ---------- */
:root[data-palette="ink"] {
  color-scheme: light;
  /* 拉开背景与卡片的层次：背景微带宣纸暖灰，卡片绝对纯白 */
  --skarn-bg: #F2F1EE;
  --skarn-surface: #FFFFFF;

  /* 极简的高对比文字 */
  --skarn-text-main: #141312;     /* 焦墨：极深的暖黑 */
  --skarn-text-muted: #5C5955;    /* 宿墨：提高灰度文字的辨识度 */
  --skarn-border: #D1CFC9;        /* 边框略微加深，强调直角切割的锐利感 */

  --skarn-primary: #242220;       /* 浓墨主色 */
  --skarn-primary-hover: #000000; /* 极致纯黑 */
  --skarn-secondary: #63605C;
  --skarn-success: #526156;       /* 极暗的苍绿，作为操作成功的区分 */
  --skarn-warning: #8F764C;       /* 枯黄，克制的中性警示 */
  --skarn-danger: #7A4A45;        /* 赭石暗红，焦墨下的危险提示 */
  --skarn-on-primary: #FFFFFF;
}
/* 暗色主色压暗（丹青保持焦墨克制）：深暖灰 */
:root[data-palette="ink"][data-theme="dark"] {
  color-scheme: dark;
  --skarn-bg: #0F0E0D;            /* 极夜 */
  --skarn-surface: #1A1918;       /* 砚台黑：与背景形成明确的物理层级 */
  --skarn-text-main: #EAE8E3;     /* 纸白：带有一丝温度的白 */
  --skarn-text-muted: #8F8C87;
  --skarn-border: #3D3B38;

  --skarn-primary: #7B7667;       /* 压暗铅白：深暖灰主色 */
  --skarn-primary-hover: #8E8878;
  --skarn-secondary: #96938E;
  --skarn-success: #6E8072;
  --skarn-warning: #B59B6F;
  --skarn-danger: #A86B63;
  --skarn-on-primary: #121110;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="ink"]:not([data-theme="light"]) {
    color-scheme: dark;
    --skarn-bg: #0F0E0D;
    --skarn-surface: #1A1918;
    --skarn-text-main: #EAE8E3;
    --skarn-text-muted: #8F8C87;
    --skarn-border: #3D3B38;
    --skarn-primary: #7B7667;
    --skarn-primary-hover: #8E8878;
    --skarn-secondary: #96938E;
    --skarn-success: #6E8072;
    --skarn-warning: #B59B6F;
    --skarn-danger: #A86B63;
    --skarn-on-primary: #121110;
  }
}

/* ---------- 公共兜底：非默认主题下的滑块/阴影/遮罩/过渡 ---------- */
:root[data-palette] {
  --skarn-switch-knob: var(--skarn-surface);
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
  --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-palette][data-theme="dark"] {
  --skarn-switch-knob: var(--skarn-text-main);
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette]:not([data-theme="light"]) {
    --skarn-switch-knob: var(--skarn-text-main);
    --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
    --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
    --skarn-overlay: rgba(0, 0, 0, 0.7);
  }
}

/* ================= 间距刻度 (Spacing Scale) ================= */
/* 全库间距统一走 8px 节奏：工具类（skarn-utilities.css 的 m-/p-/g-*）均由此派生 */
:root {
  --skarn-space-1: 0.5rem;   /* 8px   */
  --skarn-space-2: 1rem;     /* 16px  */
  --skarn-space-3: 1.5rem;   /* 24px  */
  --skarn-space-4: 2rem;     /* 32px  */
  --skarn-space-5: 2.5rem;   /* 40px  */
  --skarn-space-6: 3rem;     /* 48px  */
}

/* ================= 基础重置与排版 ================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--skarn-bg);
  color: var(--skarn-text-main);
  /* 正文使用现代无衬线体，标题用衬线体点缀（外圆内方） */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  transition: background-color var(--skarn-transition), color var(--skarn-transition);
  padding: 2rem;
}

/* 选中文本：主色的柔和点染 */
::selection {
  background-color: color-mix(in srgb, var(--skarn-primary) 22%, transparent);
}

/* 标题使用中式衬线字体体现传统韵味 */
h1, h2, h3, h4, h5, h6, .skarn-serif {
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-weight: 600;
  color: var(--skarn-text-main);
  line-height: 1.45;
  /* 字级间距递减：标题层级越高，下方留白越大（疏密有致） */
}
h1 { margin-bottom: 1.75rem; }
h2 { margin-bottom: 1.5rem; }
h3 { margin-bottom: 1.25rem; }
h4 { margin-bottom: 1rem; }
h5 { margin-bottom: 0.75rem; }
h6 { margin-bottom: 0.5rem; }

p {
  margin-bottom: 1rem;
  color: var(--skarn-text-muted);
}

/* 字体族工具 */
.skarn-sans { font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.skarn-mono { font-family: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace; }

code, .skarn-kbd {
  font-family: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
}
code {
  padding: 0.15em 0.4em;
  background-color: color-mix(in srgb, var(--skarn-border) 45%, transparent);
  color: var(--skarn-text-main);
}
.skarn-kbd {
  padding: 0.2em 0.5em;
  border: 1px solid var(--skarn-border);
  border-bottom-width: 2px; /* 模拟按键厚度，仍为直角 */
  background-color: color-mix(in srgb, var(--skarn-border) 45%, var(--skarn-surface));
  color: var(--skarn-text-main);
}

a.skarn-link {
  color: var(--skarn-secondary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--skarn-secondary) 40%, transparent);
  transition: var(--skarn-transition);
}
a.skarn-link:hover {
  color: var(--skarn-primary);
  border-bottom-color: var(--skarn-primary);
}
a.skarn-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}

/* 分割线 */
.skarn-divider {
  height: 1px;
  border: none;
  background-color: var(--skarn-border);
  margin: 2rem 0;
}

/* ================= 排版扩充 (Extended Typography) ================= */

/* 展示级标题：卷首、数字页等大场面使用，仍为衬线 */
.skarn-display-1 { font-size: 4.5rem;  margin-bottom: 1.75rem; }
.skarn-display-2 { font-size: 4rem;    margin-bottom: 1.75rem; }
.skarn-display-3 { font-size: 3.5rem;  margin-bottom: 1.5rem; }
.skarn-display-4 { font-size: 3rem;    margin-bottom: 1.5rem; }
.skarn-display-5 { font-size: 2.5rem;  margin-bottom: 1.25rem; }
.skarn-display-6 { font-size: 2.25rem; margin-bottom: 1.25rem; }
.skarn-display-1, .skarn-display-2, .skarn-display-3,
.skarn-display-4, .skarn-display-5, .skarn-display-6 {
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-weight: 600;
  line-height: 1.35;
  color: var(--skarn-text-main);
}

/* 引言段：正文与标题之间的过渡层级 */
.skarn-lead {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--skarn-text-main);
  font-weight: 400;
}

/* 引用：主色左栏 + 衬线正文，具书卷气 */
.skarn-blockquote {
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--skarn-primary);
  font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--skarn-text-main);
}
.skarn-blockquote__footer {
  margin-top: 0.5rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
}
.skarn-blockquote__footer::before {
  content: "—— ";
}

/* 图：图片带直角边框，题注居中 */
.skarn-figure {
  display: inline-block;
  margin: 0 0 1.5rem;
  max-width: 100%;
}
.skarn-figure__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
  border: 1px solid var(--skarn-border);
}
.skarn-figure__caption {
  font-size: 0.9rem;
  color: var(--skarn-text-muted);
  text-align: center;
}

/* 列表 */
.skarn-list-unstyled {
  list-style: none;
  padding-left: 0;
}
.skarn-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem; /* 与段落同节奏，避免与后续内容贴紧 */
}
.skarn-list-inline__item {
  flex: none;
}

/* 小字与标记 */
.skarn-small { font-size: 0.85rem; }
.skarn-mark {
  padding: 0.05em 0.3em;
  background-color: color-mix(in srgb, var(--skarn-primary) 18%, transparent);
  color: var(--skarn-text-main);
}