/* ==========================================================================
   晚风导航 · 设计系统 Token
   数值全部来自 Ardot 画布 732487670573529 的真实节点，不做二次估算
   ========================================================================== */

:root {
  /* ---------- 色板 ---------- */
  /* 主色系（薄荷青绿） */
  --brand: #2bb39a;
  --brand-dark: #1e8f73;
  --brand-tint: #e3f9f1;      /* 主色浅底 */
  --brand-tint-2: #edf7f5;    /* 更浅的底，用于说明条 */
  --brand-tint-3: #f2f9f7;    /* 表头底 */

  /* 中性文字四档 */
  --ink-1: #1f3a36;           /* 主文字 */
  --ink-2: #4a6663;           /* 次要 */
  --ink-3: #7e9c98;           /* 说明 */
  --ink-4: #9db5b1;           /* 占位 */

  /* 背景与描边 */
  --bg-page: #f6faf9;         /* 页面薄荷白 */
  --bg-card: #ffffff;
  --border-1: #e9f2f0;        /* 卡片描边 */
  --border-2: #d8eae6;        /* 按钮描边 */

  /* 分组识别色（与画布侧栏色点一致） */
  --dot-violet: #7c6cf0;
  --dot-mint: #2bb39a;
  --dot-peach: #ff9a76;
  --dot-sky: #4ba8f5;
  --dot-amber: #ffc44d;
  --dot-pink: #f2719f;

  /* 笔记分区色 */
  --note-pink: #f2719f;
  --note-pink-tint: #fdeef4;

  /* ---------- 危险 / 成功 ---------- */
  /* ⛔ 这两个令牌以前是缺的：admin.css / form.css 里到处写
     var(--danger, #e05a5a)，而实际用的红是 #d54941 —— fallback 值
     和真值不一致，同一个红在两处渲染出两个色。
     补上定义后，所有 danger 都统一走令牌。 */
  --danger: #d54941;/* 危险/删除/驳回 */
  --danger-dark: #b13c36;   /* hover */
  --danger-tint: #fdeceb;  /* 浅底 */
  --ok: #2bb39a;/* 与主色同源：站内"通过"动作沿用品牌绿 */

  /* ---------- 警示（"不确定，但别删"） ----------
     ⛔ 为什么单独一档而不是复用 danger：
        死链检测里403/429/超时属于「站点可能没问题，是我们被拒了」。
        刷成红色 = 管理员条件反射去删站点 —— 这正是旧版最伤用户的行为。
        黄色= 提醒看一眼，红色 = 出事了，语义必须分开。
     ⚠️ 色值取琥珀色（与 --dot-amber 同族），底色保证 ≥4.5:1 对比。 */
  --warn: #b8770a;            /* 文字/描边 */
  --warn-tint: #fdf4e0;         /* 浅底 */
  --mute: #6d8a85;            /* 中性灰（"被策略拦截"，不是错误） */
  --mute-tint: #eef3f2;

  /* ---------- 圆角 ---------- */
  --r-xs: 5px;                /* 色点 */
  --r-sm: 10px;               /* 小按钮 / 分割 */
  --r-md: 12px;               /* 分组项 */
  --r-lg: 17px;               /* 胶囊按钮 / 侧栏项 */
  --r-xl: 20px;               /* 侧栏容器 */
  --r-2xl: 31px;              /* 搜索框 */

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 4px 16px -4px rgba(46, 128, 115, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(46, 128, 115, 0.06);
  --shadow-search: 0 8px 24px -8px rgba(46, 179, 154, 0.10);

  /* ---------- 间距 ---------- */
  --gutter: 24px;             /* 页面左右 */
  --gap-card: 16px;           /* 卡片网格 */
  --gap-block: 36px;          /* 分区块之间 */

  /* ---------- 字体 ---------- */
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en: "DM Sans", "Outfit", var(--font-cn);

  /* ---------- 布局 ---------- */
  --maxw: 1440px;
}

/* ---------- 深色模式（顶栏切换按钮控制） ---------- */
body.dark {
  --bg-page: #101a19;
  --bg-card: #182624;
  --brand-tint: #16302b;
  --brand-tint-2: #142a26;
  --brand-tint-3: #1b302c;
  --ink-1: #eaf5f2;
  --ink-2: #a8c4be;
  --ink-3: #7e9c98;
  --ink-4: #62807a;
  --border-1: #243b37;
  --border-2: #2e4a45;
  --shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
  --shadow-search: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  /* ⛔ 深色模式下警示色必须**提亮**：#b8770a 在深底上对比度不足，
     文字会糊成一片。琥珀色天生适合深底，这是选它的第二个理由。 */
  --warn: #e0a53c;
  --warn-tint: #33280f;
  --mute: #8aa5a0;
  --mute-tint: #22302e;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-1);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   通用原子
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.card-surface {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}