/* ============================================
   星河导航 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;       /* 移动端遮罩引导 */
}

/* ========== 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);
}

/* ========== 全局基础重置 ========== */
* { 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;
  }
}