/* ============================================
   星河导航 v2.0 — Design Token CSS
   四层 Token 架构: A1-identity / A2-default / B-slot / C-extension
   颜色全部通过 Token 引用，禁止硬编码（唯一例外 #fff #000）
   ============================================ */

/* ========== A1-identity: 浅色主题（默认） ========== */
:root {
  /* --- Surface 表面层 --- */
  --bg: #F6F8F7;                /* 页面背景：带极淡冷绿调的白，非纯灰 */
  --surface: #FFFFFF;            /* 卡片/容器背景 */
  --surface-warm: #F0F4F2;       /* B-slot: 三级表面（分类区块底色） */

  /* --- Foreground 前景层 --- */
  --fg: #15201E;                 /* 主文本色：墨绿黑，非纯黑 */
  --fg-2: #3D4A47;               /* B-slot: 次级文本 */
  --muted: #6B7975;              /* 副文本/描述 */
  --meta: #9CA8A4;               /* B-slot: 三级前景/元数据 */

  /* --- Border 边框层 --- */
  --border: #E0E6E3;             /* 默认边框 */
  --border-soft: #EDF1EF;        /* B-slot: 内部行分隔符 */

  /* --- Accent 强调色（Teal 翡翠青） --- */
  --accent: #0D9488;             /* 品牌强调色：teal-600 */
  --accent-deep: #0F766E;        /* C-extension: 深一档强调色 */
  --accent-on: #FFFFFF;          /* A2: accent 背景上的前景色 */
  --accent-hover: #0F766E;       /* A2: 悬停态 */
  --accent-active: #115E56;      /* A2: 激活态 */
  --accent-soft: #CCFBF1;        /* C-extension: 浅强调底色（标签/badge） */
  --accent-glow: rgba(13, 148, 136, 0.08); /* C-extension: 强调色光晕 */

  /* --- Semantic 语义色 --- */
  --success: #16A34A;            /* A2 */
  --warn: #D97706;               /* A2 */
  --danger: #DC2626;             /* A2 */
  --success-soft: #DCFCE7;       /* C-extension */
  --warn-soft: #FEF3C7;          /* C-extension */
  --danger-soft: #FEE2E2;        /* C-extension */

  /* --- Typography — Fonts --- */
  --font-display: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

  /* --- Typography — Type Scale (8级字号) --- */
  --text-xs: 12px;   /* 辅助信息/标签 */
  --text-sm: 14px;   /* 正文小字/卡片描述 */
  --text-base: 16px; /* 正文基准 */
  --text-lg: 18px;   /* 小标题 */
  --text-xl: 20px;   /* 卡片标题 */
  --text-2xl: 24px;  /* 区块标题 */
  --text-3xl: 32px;  /* 页面标题 */
  --text-4xl: 40px;  /* Hero 大标题 */

  /* --- Typography — Leading --- */
  --leading-body: 1.6;           /* 正文行高 */
  --leading-tight: 1.25;         /* 标题行高 */
  --leading-display: 1.15;       /* Hero 标题行高 */

  /* --- Typography — Tracking --- */
  --tracking-body: 0;            /* 正文字距 */
  --tracking-tight: -0.02em;     /* 标题负字距 */
  --tracking-caps: 0.06em;       /* ALL CAPS 字距 */
  --tracking-wide: 0.01em;       /* 小字字距 */

  /* --- Spacing（4px 基准网格，8级） --- */
  --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;
  --space-20: 80px;

  /* --- Radius 圆角（4级） --- */
  --radius-sm: 8px;     /* 按钮/输入框/badge */
  --radius-md: 12px;    /* 卡片 */
  --radius-lg: 16px;    /* 大容器/模态框 */
  --radius-pill: 9999px;/* 胶囊/标签 */

  /* --- Elevation 阴影（3级） --- */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);                    /* 边框环 */
  --elev-raised: 0 1px 3px rgba(21,32,30,0.06), 0 4px 12px rgba(21,32,30,0.04); /* 悬浮卡片 */
  --elev-overlay: 0 8px 32px rgba(21,32,30,0.12);           /* C-extension: 弹窗/遮罩 */

  /* --- Focus & Motion --- */
  --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35); /* 焦点环 */
  --motion-fast: 150ms;     /* 即时反馈 */
  --motion-base: 200ms;     /* 状态确认 */
  --motion-slow: 300ms;     /* 进入 UI */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* 标准缓动 */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);     /* 进出缓动 */
  /* 禁止弹性缓动: cubic-bezier(0.68, -0.55, 0.265, 1.55) */

  /* --- Layout --- */
  --container-max: 1200px;       /* 内容最大宽度 */
  --container-gutter: 24px;      /* 桌面内边距 */
  --container-gutter-tablet: 16px;
  --container-gutter-mobile: 12px;
  --section-y-desktop: 80px;    /* 桌面节区间距 */
  --section-y-tablet: 48px;
  --section-y-phone: 32px;
  --sidebar-w: 220px;           /* PC 侧边栏宽度 */
  --sidebar-collapsed-w: 64px;  /* 折叠态宽度 */
  --header-h: 56px;             /* 顶部栏高度 */
  --admin-sidebar-w: 240px;     /* 后台侧边栏宽度 */
  --admin-header-h: 60px;       /* 后台顶栏高度 */
  --mobile-tabbar-h: 56px;      /* 移动端底部导航高度 */

  /* --- Layout: 右侧栏 + 三栏网格 --- */
  --right-sidebar-w: 300px;
  --right-sidebar-gap: 24px;
  --content-grid: var(--sidebar-w) 1fr var(--right-sidebar-w);

  /* --- Upload Dropzone --- */
  --upload-dropzone-border: 2px dashed var(--border);
  --upload-dropzone-radius: var(--radius-md);

  /* --- Z-Index 层级 --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-sidebar: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-mask: 800;       /* 移动端遮罩引导 */

  /* ========== v3.3 移动端优化扩展（温暖复古 + 雪山 Hero） ========== */
  /* 胶囊分类选择器：选中=复古朱红底白字 / 未选中=暖灰底深字（PC/移动一致） */
  --capsule-track-bg: #EDEEEC;        /* C-extension: 分段器轨道底色（暖灰） */
  --capsule-idle-bg: #F0F4F2;         /* 未选中底 */
  --capsule-idle-bg-hover: #E4E9E6;   /* 未选中悬停 */
  --capsule-idle-fg: #3D4A47;         /* 未选中字（fg-2） */
  --capsule-active-bg: #B5402E;       /* C-extension: 选中态·复古朱红（朱砂，非紫粉） */
  --capsule-active-bg-hover: #9E3626; /* 选中悬停 */
  --capsule-active-fg: #FFFFFF;       /* 选中字：白 */
  --capsule-radius: var(--radius-pill);
  --capsule-fs: var(--text-sm);

  /* 右下角浮动按钮组（移动端：主题切换 + 回到顶部） */
  --fab-size: 44px;
  --fab-gap: var(--space-2);
  --fab-bg: var(--surface);
  --fab-fg: var(--fg-2);
  --fab-fg-hover: var(--accent);
  --fab-border: var(--border);
  --fab-bottom: calc(var(--mobile-tabbar-h) + var(--space-4));
  --fab-right: var(--space-4);
  --fab-radius: var(--radius-pill);
  --fab-hide-translate: translateY(calc(100% + var(--fab-bottom) + 20px));

  /* 社交 APP 内遮罩（不可关闭，仅「在浏览器打开」） */
  --mask-scrim: rgba(12, 17, 16, 0.92);
  --mask-card-bg: var(--surface);
  --mask-fg: var(--fg);
  --mask-sub: var(--muted);

  /* 雪山 Hero 搜索区（浅色：干净留白 + 极淡雪山线，禁止紫粉） */
  --snow-hero-bg-light: var(--bg);
  --snow-hero-fg-light: var(--fg);
  --snow-hero-sub-light: var(--muted);
  --snow-hero-mountain-light: rgba(13, 148, 136, 0.10); /* teal 雪山剪影，极淡 */
  --snow-hero-accent-light: var(--accent);

  /* 公告轮播（浅色：干净卡片 pill，文字用主文本保证任何浅色表面都可见） */
  --announce-bg-light: var(--surface);
  --announce-border-light: var(--border);
  --announce-fg-light: var(--fg);
  --announce-dot-idle: var(--border);
  --announce-dot-active: var(--accent);
}

/* ========== A1-identity: 暗色主题 ========== */
:root[data-theme="dark"] {
  /* --- Surface 表面层（亮度递进表达层级，非阴影） --- */
  --bg: #0C1110;                /* 页面背景：深墨绿黑 */
  --surface: #141B19;            /* 卡片/容器背景 */
  --surface-warm: #1C2522;       /* B-slot: 三级表面 */

  /* --- Foreground 前景层 --- */
  --fg: #E8F0ED;                 /* 主文本色 */
  --fg-2: #B8C5C0;               /* B-slot: 次级文本 */
  --muted: #7A8A85;              /* 副文本 */
  --meta: #525C58;               /* B-slot: 元数据 */

  /* --- Border 边框层 --- */
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);

  /* --- Accent 强调色（暗色模式提亮一档） --- */
  --accent: #2DD4BF;             /* teal-400，暗色模式更亮 */
  --accent-deep: #14B8A6;        /* C-extension */
  --accent-on: #0C1110;          /* 暗色模式 accent 上文字为深色 */
  --accent-hover: #14B8A6;       /* A2 */
  --accent-active: #0D9488;      /* A2 */
  --accent-soft: rgba(45, 212, 191, 0.12); /* C-extension */
  --accent-glow: rgba(45, 212, 191, 0.10);

  /* --- Semantic 语义色（暗色模式适配） --- */
  --success: #4ADE80;
  --warn: #FBBF24;
  --danger: #F87171;
  --success-soft: rgba(74, 222, 128, 0.12);
  --warn-soft: rgba(251, 191, 36, 0.12);
  --danger-soft: rgba(248, 113, 113, 0.12);

  /* --- Elevation 阴影（暗色模式用亮度边框代替） --- */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  --elev-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* --- Focus Ring（暗色模式适配） --- */
  --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.3);

  /* ========== v3.3 移动端优化扩展（暗色模式） ========== */
  --capsule-track-bg: #1C2522;
  --capsule-idle-bg: #1C2522;
  --capsule-idle-bg-hover: #243029;
  --capsule-idle-fg: #B8C5C0;          /* fg-2 暗色 */
  --capsule-active-bg: #D9664F;         /* C-extension: 暗色选中·暖陶红（提亮一档，仍非紫粉） */
  --capsule-active-bg-hover: #E0775E;
  --capsule-active-fg: #0C1110;         /* 暗色选中字：深底（对比充足） */

  --fab-bg: #141B19;
  --fab-fg: #B8C5C0;
  --fab-fg-hover: #2DD4BF;
  --fab-border: rgba(255, 255, 255, 0.10);
  --mask-scrim: rgba(0, 0, 0, 0.94);

  /* 雪山 Hero（深色：真实雪山夜景 SVG 背景 + 白字，禁止紫粉） */
  --snow-hero-bg-dark: #0C1110;
  --snow-hero-fg-dark: #F2F7F5;        /* 近白 */
  --snow-hero-sub-dark: #9DAAA6;
  --snow-hero-mountain-dark: rgba(45, 212, 191, 0.14); /* teal 雪山夜剪影 */
  --snow-hero-accent-dark: #2DD4BF;
  --snow-hero-star: rgba(255, 255, 255, 0.55);          /* 星点 */

  /* 公告轮播（深色：深色卡片 pill） */
  --announce-bg-dark: #141B19;
  --announce-border-dark: rgba(255, 255, 255, 0.08);
  --announce-fg-dark: #B8C5C0;
  --announce-dot-idle: rgba(255, 255, 255, 0.18);
  --announce-dot-active: #2DD4BF;
}

/* ========== 全局基础重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
*:before, *:after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: var(--leading-body);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

/* 焦点可见性 */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--meta); }

/* ========== 布局容器 ========== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* ========== 无障碍：减少动效 ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   v3.3 暖色风格（复古暖色）— 后台可切换 data-style="warm"
   ------------------------------------------------------------
   用途：后台「外观风格」开关选择「复古暖色」时，<html data-style="warm">
   即应用本组覆盖。仅覆盖与主色/表面/文本相关的 Token，其余沿用浅/深主题。
   主色由 翡翠青(Teal) 转为 赭石/暖棕系（文艺复古质感）；
   朱砂红胶囊选中态（--capsule-active-bg）两套通用，不在此覆盖。
   配色约束：暖棕/赭石系，禁紫粉；对比度保持 AA。
   ============================================ */
:root[data-style="warm"] {
  /* --- 浅色模式下的暖色主色板 --- */
  --accent: #B06A2C;            /* 赭石橙棕（暖棕系主色，替代 teal） */
  --accent-deep: #8C5320;      /* 深一档强调 */
  --accent-on: #FFFFFF;         /* accent 背景上的前景 */
  --accent-hover: #9A5C24;      /* 悬停 */
  --accent-active: #7E4A1C;     /* 激活 */
  --accent-soft: #F3E3D3;       /* 浅暖底（标签/badge） */
  --accent-glow: rgba(176, 106, 44, 0.10);

  /* --- 暖调表面与文本（带极淡赭石调，非纯暖灰） --- */
  --bg: #FAF6F1;                /* 暖白底 */
  --surface: #FFFFFF;
  --surface-warm: #F3ECE3;      /* 三级表面 */
  --fg: #2A211A;                /* 暖墨棕黑（非纯黑） */
  --fg-2: #51453C;              /* 次级文本 */
  --muted: #837567;             /* 副文本 */
  --meta: #B0A496;              /* 元数据 */
  --border: #EAE0D4;            /* 边框 */
  --border-soft: #F2EBE2;       /* 内部行分隔 */
  --focus-ring: 0 0 0 3px rgba(176, 106, 44, 0.35);

  /* --- 雪山 Hero 浅色：暖调雪山剪影 --- */
  --snow-hero-mountain-light: rgba(176, 106, 44, 0.10);
  --snow-hero-accent-light: var(--accent);
}

/* 暗色模式 + 暖色风格：主色提亮一档，表面转暖墨棕黑 */
:root[data-style="warm"][data-theme="dark"] {
  --accent: #E0935A;            /* 暖橙棕提亮 */
  --accent-deep: #C97B45;
  --accent-on: #1A1410;
  --accent-hover: #C97B45;
  --accent-active: #B06A2C;
  --accent-soft: rgba(224, 147, 90, 0.14);
  --accent-glow: rgba(224, 147, 90, 0.12);

  --bg: #14100C;                /* 暖墨棕黑 */
  --surface: #1F1812;
  --surface-warm: #2A211A;
  --fg: #F3E9DF;
  --fg-2: #C9B8A8;
  --muted: #917F6E;
  --meta: #6E6256;
  --border: rgba(255, 230, 200, 0.10);
  --border-soft: rgba(255, 230, 200, 0.06);
  --focus-ring: 0 0 0 3px rgba(224, 147, 90, 0.30);

  --snow-hero-bg-dark: #14100C;
  --snow-hero-fg-dark: #F3E9DF;
  --snow-hero-sub-dark: #B6A595;
  --snow-hero-mountain-dark: rgba(224, 147, 90, 0.14);
  --snow-hero-accent-dark: #E0935A;
  --snow-hero-star: rgba(255, 235, 210, 0.55);

  --announce-dot-active: #E0935A;
}