/* ============================================================================
   主题映射 —— 语义变量
   ----------------------------------------------------------------------------
   两套主题，都来自两个参考站：
     [data-theme="light"]  米白纸面   ← vvd.world 的阅读视图底色  【默认】
     [data-theme="dark"]   深灰沉浸   ← matrees.cn 的工作台底色

   切换方式：<html data-theme="light"> / <html data-theme="dark">
   新增主题只需再加一段 [data-theme="xxx"]，不改任何别处。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ★ 强调色切换点 —— 只想换主色时，改这三行就够
   当前：金色（vvd 的暖金，在米白纸上更自然）
   备选：绿色（matrees 的品牌绿）——把下面注释打开、上面三行注释掉
   --------------------------------------------------------------------------- */
:root {
  --accent-base:      var(--gold-500);
  --accent-strong:    var(--gold-600);
  --accent-soft-base: var(--gold-soft);
}
/*
:root {
  --accent-base:      var(--green-500);
  --accent-strong:    var(--green-600);
  --accent-soft-base: var(--green-soft);
}
*/

/* ===========================================================================
   light —— 米白纸面（默认）
   =========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 底与面 */
  --bg:            var(--paper-100);
  --bg-deep:       var(--paper-200);
  --surface:       var(--paper-50);
  --surface-2:     var(--paper-200);
  --surface-3:     var(--paper-300);
  --surface-sunken: var(--paper-200);

  /* 线 */
  --line:          rgba(36, 31, 24, 0.12);
  --line-strong:   rgba(36, 31, 24, 0.22);
  --line-faint:    rgba(36, 31, 24, 0.07);

  /* 文字（四级，对应 matrees 的灰阶层次） */
  --text:          var(--ink-900);
  --text-2:        var(--ink-700);
  --text-3:        var(--ink-600);
  --text-4:        var(--ink-500);

  /* 强调 */
  --accent:        var(--accent-base);
  --accent-hover:  var(--accent-strong);
  --accent-soft:   var(--accent-soft-base);
  --accent-ink:    var(--ink-900);   /* 强调色块上的文字 */
  --link:          var(--brick-500); /* 正文内链接：纸面上更自然 */

  /* 玻璃层（导航专用） */
  --glass:         rgba(249, 244, 234, 0.78);
  --glass-line:    rgba(36, 31, 24, 0.10);

  /* 阴影（纸面上的阴影要轻） */
  --shadow-1: 0 1px 2px rgba(36, 31, 24, 0.06);
  --shadow-2: 0 4px 16px rgba(36, 31, 24, 0.08);
  --shadow-3: 0 16px 40px rgba(36, 31, 24, 0.12);

  /* 占位（未填写的内容长什么样） */
  --ph-bg:     rgba(36, 31, 24, 0.035);
  --ph-line:   rgba(36, 31, 24, 0.16);
  --ph-text:   var(--ink-500);

  /* 插画遮罩（让任何图片上都能压住文字） */
  --scrim: linear-gradient(180deg,
             rgba(36, 31, 24, 0.28) 0%,
             rgba(36, 31, 24, 0.52) 60%,
             rgba(36, 31, 24, 0.72) 100%);
  --scrim-text: var(--paper-50);
}

/* ===========================================================================
   dark —— 深灰沉浸
   =========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--gray-950);
  --bg-deep:       #0d0d0d;
  --surface:       var(--gray-900);
  --surface-2:     var(--gray-850);
  --surface-3:     var(--gray-800);
  --surface-sunken: #0f0f0f;

  --line:          rgba(255, 255, 255, 0.10);
  --line-strong:   rgba(255, 255, 255, 0.18);
  --line-faint:    rgba(255, 255, 255, 0.06);

  --text:          var(--gray-100);
  --text-2:        var(--gray-300);
  --text-3:        var(--gray-400);
  --text-4:        var(--gray-500);

  --accent:        var(--accent-base);
  --accent-hover:  var(--accent-strong);
  --accent-soft:   var(--accent-soft-base);
  --accent-ink:    #141414;
  --link:          var(--indigo-500);

  --glass:         rgba(20, 20, 20, 0.62);
  --glass-line:    rgba(255, 255, 255, 0.10);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.65);

  --ph-bg:     rgba(255, 255, 255, 0.03);
  --ph-line:   rgba(255, 255, 255, 0.16);
  --ph-text:   var(--gray-500);

  --scrim: linear-gradient(180deg,
             rgba(0, 0, 0, 0.35) 0%,
             rgba(0, 0, 0, 0.60) 60%,
             rgba(20, 20, 20, 0.92) 100%);
  --scrim-text: var(--gray-100);
}

/* ===========================================================================
   尊重系统偏好：用户没手动选过时，跟随系统
   （手动选过则由 JS 写 data-theme，优先级更高）
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: var(--gray-950);
    --bg-deep: #0d0d0d;
    --surface: var(--gray-900);
    --surface-2: var(--gray-850);
    --surface-3: var(--gray-800);
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);
    --line-faint: rgba(255, 255, 255, 0.06);
    --text: var(--gray-100);
    --text-2: var(--gray-300);
    --text-3: var(--gray-400);
    --text-4: var(--gray-500);
    --accent-ink: #141414;
    --link: var(--indigo-500);
    --glass: rgba(20, 20, 20, 0.62);
    --glass-line: rgba(255, 255, 255, 0.10);
    --ph-bg: rgba(255, 255, 255, 0.03);
    --ph-line: rgba(255, 255, 255, 0.16);
    --ph-text: var(--gray-500);
    color-scheme: dark;
  }
}