/* ==========================================================================
   大宋 dasong.online — 设计令牌 (Design Tokens)
   浅色为默认；深色通过下面两条路径生效（二者取值完全一致）：
     1) 跟随系统：@media (prefers-color-scheme: dark)  —— 纯 CSS，无 JS 也不闪白
     2) 手动指定：<html data-mode="dark"> / data-mode="light"（由 theme-boot.js 尽早在 head 里写入）
   主题色（data-theme）在深色下换成对应的亮色强调色，保持各自主色调。
   ========================================================================== */

/* ---------- 深色令牌：只在这里定义一次，下面两条规则引用 ---------- */
:root {
  --d-bg: #15161a;
  --d-surface: #1d1f25;
  --d-surface-2: #24272e;
  --d-border: #2f333c;
  --d-border-strong: #3f4550;
  --d-text: #e8eaf0;
  --d-text-muted: #a4abb8;
  --d-text-soft: #7c838f;

  --d-success: #5bd68f; --d-success-bg: #12301f;
  --d-danger:  #ff8a8a; --d-danger-bg:  #3a1c1c;
  --d-warning: #f5c451; --d-warning-bg: #3a2e12;
  --d-info:    #6cb6ff; --d-info-bg:    #152840;

  --d-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --d-shadow-sm: 0 2px 8px rgba(0, 0, 0, .55);
  --d-shadow-md: 0 8px 24px rgba(0, 0, 0, .6);
  --d-shadow-lg: 0 18px 48px rgba(0, 0, 0, .7);

  /* 默认主题（暖金）在深色下的强调色 */
  --d-primary: #f0b563; --d-primary-strong: #ffd08a;
  --d-accent: #e8a44e; --d-accent-soft: #3a2b12;
  --d-info-accent: #8cc6ff; --d-info-accent-bg: #16263c;
}
/* 各主题在深色下的强调色（浅色模式下这些变量不会被用到） */
:root[data-theme="blue"]   { --d-primary:#6cb0f5; --d-primary-strong:#9ccbff; --d-accent:#4d9ef0; --d-accent-soft:#12293f; --d-info-accent:#8cc6ff; --d-info-accent-bg:#12293f; }
:root[data-theme="green"]  { --d-primary:#5fc46f; --d-primary-strong:#8ee39b; --d-accent:#4caf50; --d-accent-soft:#14311c; --d-info-accent:#8ee39b; --d-info-accent-bg:#14311c; }
:root[data-theme="purple"] { --d-primary:#b07de0; --d-primary-strong:#d0a8f5; --d-accent:#9a5fd0; --d-accent-soft:#2a1c3a; --d-info-accent:#c9a6f0; --d-info-accent-bg:#2a1c3a; }
:root[data-theme="rose"]   { --d-primary:#f0709d; --d-primary-strong:#ff9cbf; --d-accent:#e05585; --d-accent-soft:#3a1a26; --d-info-accent:#ff9cbf; --d-info-accent-bg:#3a1a26; }
:root[data-theme="teal"]   { --d-primary:#4fc4b5; --d-primary-strong:#85e0d2; --d-accent:#35a99a; --d-accent-soft:#10302c; --d-info-accent:#85e0d2; --d-info-accent-bg:#10302c; }
:root[data-theme="slate"]  { --d-primary:#9fb0bd; --d-primary-strong:#c2ced8; --d-accent:#7d8f9c; --d-accent-soft:#232b31; --d-info-accent:#c2ced8; --d-info-accent-bg:#232b31; }

/* ---------- 默认：暖琥珀金（浅色暖调背景） ---------- */
:root {
  color-scheme: light;
  --color-primary: #b45309;
  --color-primary-strong: #9a3d08;
  --color-accent: #d97706;
  --color-accent-soft: #fef3c7;

  /* 中性色（浅色背景随主题微调） */
  --color-bg: #f6f4ef;
  --color-surface: #ffffff;
  --color-surface-2: #fbfaf6;
  --color-border: #e7e1d4;
  --color-border-strong: #d8d0bf;

  /* 文本 */
  --color-text: #29241d;
  --color-text-muted: #72695b;
  --color-text-soft: #9a9082;

  /* 语义色 */
  --color-success: #16794d;
  --color-success-bg: #e3f5ec;
  --color-danger: #c0392b;
  --color-danger-bg: #fbe9e7;
  --color-warning: #a96f0d;
  --color-warning-bg: #fdf3e0;
  --color-info: #1f5f8b;
  --color-info-bg: #e6f1f9;

  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(50, 40, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(50, 40, 20, 0.07);
  --shadow-md: 0 8px 24px rgba(50, 40, 20, 0.09);
  --shadow-lg: 0 18px 48px rgba(50, 40, 20, 0.12);
  --font-sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  --container: 1120px; --nav-h: 64px;
  --ease: cubic-bezier(0.22, 0.8, 0.36, 1); --dur: 0.22s;
}

/* ---------- 主题：浅蓝（清爽蓝，浅蓝背景） ---------- */
:root[data-theme="blue"] {
  --color-primary: #1565c0; --color-primary-strong: #0d47a1;
  --color-accent: #1e88e5; --color-accent-soft: #e3f2fd;
  --color-info: #0d47a1; --color-info-bg: #e3f2fd;
  --color-bg: #eef4fc; --color-surface: #ffffff; --color-surface-2: #f3f8fd;
  --color-border: #dde8f5; --color-border-strong: #c2d6ee;
  --color-text-muted: #5b6b7d; --color-text-soft: #8393a5;
}
/* ---------- 主题：绿 ---------- */
:root[data-theme="green"] {
  --color-primary: #2e7d32; --color-primary-strong: #1b5e20;
  --color-accent: #43a047; --color-accent-soft: #e8f5e9;
  --color-info: #1b5e20; --color-info-bg: #e8f5e9;
  --color-bg: #eef6ef; --color-surface: #ffffff; --color-surface-2: #f4faf5;
  --color-border: #daeadc; --color-border-strong: #bedcc2;
  --color-text-muted: #5c6b5f; --color-text-soft: #86978a;
}
/* ---------- 主题：紫 ---------- */
:root[data-theme="purple"] {
  --color-primary: #6a1b9a; --color-primary-strong: #4a148c;
  --color-accent: #8e24aa; --color-accent-soft: #f3e5f5;
  --color-info: #4a148c; --color-info-bg: #f3e5f5;
  --color-bg: #f7f1fb; --color-surface: #ffffff; --color-surface-2: #fbf6fe;
  --color-border: #e9def3; --color-border-strong: #d6c3e8;
  --color-text-muted: #6a6272; --color-text-soft: #938ca0;
}
/* ---------- 主题：玫红 ---------- */
:root[data-theme="rose"] {
  --color-primary: #ad1457; --color-primary-strong: #880e4f;
  --color-accent: #ec407a; --color-accent-soft: #fce4ec;
  --color-info: #880e4f; --color-info-bg: #fce4ec;
  --color-bg: #fdf1f4; --color-surface: #ffffff; --color-surface-2: #fef6f8;
  --color-border: #f4dfe6; --color-border-strong: #eac4d0;
  --color-text-muted: #84626e; --color-text-soft: #a98b96;
}
/* ---------- 主题：青 ---------- */
:root[data-theme="teal"] {
  --color-primary: #00695c; --color-primary-strong: #004d40;
  --color-accent: #26a69a; --color-accent-soft: #e0f2f1;
  --color-info: #004d40; --color-info-bg: #e0f2f1;
  --color-bg: #edf7f6; --color-surface: #ffffff; --color-surface-2: #f3faf9;
  --color-border: #d7ecea; --color-border-strong: #badcd8;
  --color-text-muted: #4f6663; --color-text-soft: #7b918e;
}
/* ---------- 主题：蓝灰 ---------- */
:root[data-theme="slate"] {
  --color-primary: #37474f; --color-primary-strong: #263238;
  --color-accent: #546e7a; --color-accent-soft: #eceff1;
  --color-info: #263238; --color-info-bg: #eceff1;
  --color-bg: #f0f2f4; --color-surface: #ffffff; --color-surface-2: #f6f8fa;
  --color-border: #dee4e9; --color-border-strong: #c7cfd7;
  --color-text-muted: #58616a; --color-text-soft: #818b94;
}

/* ==========================================================================
   深色模式：把上面的 --d-* 令牌映射到正式令牌。
   下面两条规则的取值必须保持一致（一条管「跟随系统」，一条管「手动指定」）。
   ========================================================================== */

/* 1) 跟随系统（没有 JS 也生效，且不会先亮后暗） */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --color-bg: var(--d-bg);
    --color-surface: var(--d-surface);
    --color-surface-2: var(--d-surface-2);
    --color-border: var(--d-border);
    --color-border-strong: var(--d-border-strong);
    --color-text: var(--d-text);
    --color-text-muted: var(--d-text-muted);
    --color-text-soft: var(--d-text-soft);
    --color-primary: var(--d-primary);
    --color-primary-strong: var(--d-primary-strong);
    --color-accent: var(--d-accent);
    --color-accent-soft: var(--d-accent-soft);
    --color-info: var(--d-info-accent);
    --color-info-bg: var(--d-info-accent-bg);
    --color-success: var(--d-success); --color-success-bg: var(--d-success-bg);
    --color-danger: var(--d-danger);   --color-danger-bg: var(--d-danger-bg);
    --color-warning: var(--d-warning); --color-warning-bg: var(--d-warning-bg);
    --shadow-xs: var(--d-shadow-xs);
    --shadow-sm: var(--d-shadow-sm);
    --shadow-md: var(--d-shadow-md);
    --shadow-lg: var(--d-shadow-lg);
  }
}

/* 2) 手动指定（theme-boot.js 会在 <head> 里尽早写 data-mode） */
:root[data-mode="dark"] {
  color-scheme: dark;
  --color-bg: var(--d-bg);
  --color-surface: var(--d-surface);
  --color-surface-2: var(--d-surface-2);
  --color-border: var(--d-border);
  --color-border-strong: var(--d-border-strong);
  --color-text: var(--d-text);
  --color-text-muted: var(--d-text-muted);
  --color-text-soft: var(--d-text-soft);
  --color-primary: var(--d-primary);
  --color-primary-strong: var(--d-primary-strong);
  --color-accent: var(--d-accent);
  --color-accent-soft: var(--d-accent-soft);
  --color-info: var(--d-info-accent);
  --color-info-bg: var(--d-info-accent-bg);
  --color-success: var(--d-success); --color-success-bg: var(--d-success-bg);
  --color-danger: var(--d-danger);   --color-danger-bg: var(--d-danger-bg);
  --color-warning: var(--d-warning); --color-warning-bg: var(--d-warning-bg);
  --shadow-xs: var(--d-shadow-xs);
  --shadow-sm: var(--d-shadow-sm);
  --shadow-md: var(--d-shadow-md);
  --shadow-lg: var(--d-shadow-lg);
}