/* ===== 共享设计变量 =====
 * index.html 和 links.html 共用，改品牌色只需改这一处。
 */

:root {
  color-scheme: light dark;

  /* 颜色 —— 素墨·宣纸 */
  --color-bg: #f4efe6;            /* 宣纸米白 */
  --color-surface: #faf6ee;       /* 微亮纸面 */
  --color-alt: #ece4d6;           /* 略深纸（交替板块） */
  --color-text: #23201c;          /* 浓墨 */
  --color-text-light: #6b6358;    /* 灰墨 */
  --color-accent: #b23a2e;        /* 朱砂红（仅点睛） */
  --color-accent-hover: #9a2e23;
  --color-accent-dark: #7d241b;
  --color-accent-soft: rgba(178,58,46,.08);
  --color-ink-tint: rgba(35,32,28,.06);  /* 常规交互底（导航 hover 等） */
  --color-border: #d6cab6;        /* 淡墨线 */
  --color-nav-bg: rgba(244,239,230,.85);
  --color-nav-bg-scrolled: rgba(244,239,230,.97);

  /* 阴影 —— 墨调，统一光源自上方 */
  --shadow-sm: 0 1px 4px rgba(35,32,28,.07);
  --shadow: 0 6px 22px rgba(35,32,28,.10);
  --shadow-lg: 0 18px 48px rgba(35,32,28,.18);

  /* 排版 */
  --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', 'Noto Serif SC', serif;

  /* 圆角阶梯 — 容器更软、内部更紧 */
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 8px;

  /* 间距 */
  --space-section: clamp(72px, 10vw, 120px);

  /* 动效 */
  --motion-fast: .18s;
  --motion-base: .42s;
  --motion-reveal: .78s;
  --motion-stagger: 70ms;
  --motion-distance: 16px;
  --ease-editorial: cubic-bezier(.22,.75,.2,1);
  --ease-out: var(--ease-editorial);
  --dur: var(--motion-reveal);

  /* 布局 */
  --max-width: 1200px;
  --nav-height: 64px;
}

/* ===== 深色模式 =====
 * 默认跟随系统/设备外观；页首按钮可写 data-theme="light" / "dark" 强制覆盖。
 * 深色变量抽成一个变量组，供「系统深色（未强制浅色）」与「手动深色」两种情况复用。
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #15171a;            /* 深蓝墨 */
    --color-surface: #202327;
    --color-alt: #1a1d20;
    --color-text: #e8e4d8;          /* 月白 */
    --color-text-light: #a39a8c;
    --color-accent: #d4574a;        /* 朱砂提亮 */
    --color-accent-hover: #e0685b;
    --color-accent-dark: #e0685b;
    --color-accent-soft: rgba(212,87,74,.14);
    --color-ink-tint: rgba(255,255,255,.06);
    --color-border: #2e3138;
    --color-nav-bg: rgba(21,23,26,.85);
    --color-nav-bg-scrolled: rgba(21,23,26,.97);

    --shadow-sm: 0 1px 4px rgba(0,0,0,.35);
    --shadow: 0 6px 22px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"] {
  --color-bg: #15171a;            /* 深蓝墨 */
  --color-surface: #202327;
  --color-alt: #1a1d20;
  --color-text: #e8e4d8;          /* 月白 */
  --color-text-light: #a39a8c;
  --color-accent: #d4574a;        /* 朱砂提亮 */
  --color-accent-hover: #e0685b;
  --color-accent-dark: #e0685b;
  --color-accent-soft: rgba(212,87,74,.14);
  --color-ink-tint: rgba(255,255,255,.06);
  --color-border: #2e3138;
  --color-nav-bg: rgba(21,23,26,.85);
  --color-nav-bg-scrolled: rgba(21,23,26,.97);

  --shadow-sm: 0 1px 4px rgba(0,0,0,.35);
  --shadow: 0 6px 22px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
}