/* ==========================================================================
   Mizzle · 烟雨恋夏 — 设计变量 / 12 套渐变主题
   所有颜色都走 CSS 变量，主题切换只换 html[data-theme]，强调色由用户覆盖 --accent
   ========================================================================== */

:root {
  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* 间距 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 30px;
  --s7: 42px;
  --s8: 60px;

  /* 字体 */
  --f-ui: "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --f-logo: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Kaiti SC", "KaiTi", cursive;
  --f-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", "STSong", serif;
  --f-kai: "Kaiti SC", "STKaiti", "KaiTi", "FangSong", "STFangsong", serif;
  --f-hei: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.26s;
  --dur-slow: 0.5s;

  /* 用户可调（毛玻璃 / 强调色） */
  --glass-opacity: 0.62;
  --glass-blur: 20px;
  --accent: #ef8a4c;
  --accent-2: #f6b073;
  --accent-ink: #ffffff;

  /* 布局 */
  --sidebar-w: 238px;
  --topbar-h: 76px;
}

/* 基础亮色（各主题在此基础上覆盖） */
html {
  --panel-rgb: 255, 255, 255;
  --bg-base: #f5faf6;
  --ink: #38453d;
  --ink-2: #6e7d75;
  --ink-3: #9aa8a0;
  --line: rgba(96, 124, 110, 0.15);
  --line-strong: rgba(96, 124, 110, 0.26);
  --shadow: 0 20px 46px rgba(84, 116, 100, 0.13);
  --shadow-sm: 0 8px 20px rgba(84, 116, 100, 0.1);
  --ribbon: #e8834a;
  --ribbon-ink: #fff;
  --reader-paper: #fbf8f2;
  --reader-ink: #3a3a35;
  color-scheme: light;
}

/* ── 1. 薄荷奶绿（默认，参考示例渐变主题1） ─────────────────────────── */
html[data-theme="mint"] {
  --bg-base: #f2fbf5;
  --bg-image: radial-gradient(1200px 700px at 10% 6%, #cdeee0 0%, rgba(205, 238, 224, 0) 60%),
    radial-gradient(1000px 800px at 90% 14%, #fbeecb 0%, rgba(251, 238, 203, 0) 62%),
    radial-gradient(900px 700px at 68% 96%, #e2f2ff 0%, rgba(226, 242, 255, 0) 60%),
    linear-gradient(135deg, #eaf9f0 0%, #f7fbf3 45%, #fdf6e9 100%);
  --ink: #34423b;
  --ink-2: #6b7d74;
  --ink-3: #97a89f;
  --line: rgba(96, 124, 110, 0.15);
  --line-strong: rgba(96, 124, 110, 0.26);
  --ribbon: #e8834a;
}

/* ── 2. 烟雨青蓝 ──────────────────────────────────────────────────── */
html[data-theme="rain"] {
  --bg-base: #f1f7fb;
  --bg-image: radial-gradient(1100px 700px at 12% 10%, #cfe4f2 0%, rgba(207, 228, 242, 0) 62%),
    radial-gradient(900px 700px at 86% 20%, #e6e9f8 0%, rgba(230, 233, 248, 0) 60%),
    radial-gradient(1000px 800px at 40% 98%, #f7efe1 0%, rgba(247, 239, 225, 0) 60%),
    linear-gradient(150deg, #e8f3fa 0%, #f4f8fc 50%, #fbf7ef 100%);
  --ink: #33424f;
  --ink-2: #6a7c8c;
  --ink-3: #94a5b4;
  --line: rgba(84, 112, 136, 0.16);
  --line-strong: rgba(84, 112, 136, 0.28);
  --ribbon: #5f8fbf;
}

/* ── 3. 落日橘 ───────────────────────────────────────────────────── */
html[data-theme="sunset"] {
  --bg-base: #fdf6ee;
  --bg-image: radial-gradient(1100px 700px at 8% 12%, #ffdcc0 0%, rgba(255, 220, 192, 0) 62%),
    radial-gradient(1000px 760px at 90% 16%, #ffe6c8 0%, rgba(255, 230, 200, 0) 60%),
    radial-gradient(900px 700px at 55% 96%, #ffd9d0 0%, rgba(255, 217, 208, 0) 58%),
    linear-gradient(145deg, #fff0e0 0%, #fff8ee 50%, #fdefe6 100%);
  --ink: #4c3a2e;
  --ink-2: #8a7060;
  --ink-3: #b39a88;
  --line: rgba(150, 110, 80, 0.16);
  --line-strong: rgba(150, 110, 80, 0.28);
  --ribbon: #e07a3a;
}

/* ── 4. 樱花粉 ───────────────────────────────────────────────────── */
html[data-theme="sakura"] {
  --bg-base: #fff6f9;
  --bg-image: radial-gradient(1100px 740px at 10% 8%, #ffdbe8 0%, rgba(255, 219, 232, 0) 62%),
    radial-gradient(1000px 700px at 88% 22%, #f3e0f7 0%, rgba(243, 224, 247, 0) 60%),
    radial-gradient(900px 720px at 60% 98%, #fdeee2 0%, rgba(253, 238, 226, 0) 58%),
    linear-gradient(140deg, #fff1f5 0%, #fff8fa 52%, #fff3ec 100%);
  --ink: #4d3742;
  --ink-2: #8c6d7c;
  --ink-3: #b69aa6;
  --line: rgba(160, 110, 130, 0.15);
  --line-strong: rgba(160, 110, 130, 0.27);
  --ribbon: #e06a8f;
}

/* ── 5. 雾紫 ─────────────────────────────────────────────────────── */
html[data-theme="lavender"] {
  --bg-base: #f8f5ff;
  --bg-image: radial-gradient(1100px 720px at 12% 8%, #e2dbfb 0%, rgba(226, 219, 251, 0) 62%),
    radial-gradient(960px 700px at 90% 18%, #dde7fb 0%, rgba(221, 231, 251, 0) 60%),
    radial-gradient(860px 700px at 46% 98%, #fbe7f3 0%, rgba(251, 231, 243, 0) 58%),
    linear-gradient(150deg, #f2eeff 0%, #f8f5ff 50%, #fdf5fb 100%);
  --ink: #3f3952;
  --ink-2: #766a92;
  --ink-3: #a498bb;
  --line: rgba(110, 96, 150, 0.16);
  --line-strong: rgba(110, 96, 150, 0.28);
  --ribbon: #8b7ad4;
}

/* ── 6. 海盐蓝 ───────────────────────────────────────────────────── */
html[data-theme="ocean"] {
  --bg-base: #f2f9ff;
  --bg-image: radial-gradient(1200px 720px at 8% 10%, #cfe8fb 0%, rgba(207, 232, 251, 0) 62%),
    radial-gradient(1000px 720px at 92% 18%, #d9f2f4 0%, rgba(217, 242, 244, 0) 60%),
    radial-gradient(900px 700px at 50% 100%, #e9f0ff 0%, rgba(233, 240, 255, 0) 58%),
    linear-gradient(160deg, #e6f4ff 0%, #f4fafe 52%, #eef6ff 100%);
  --ink: #2f4453;
  --ink-2: #64809a;
  --ink-3: #91a9bf;
  --line: rgba(70, 110, 145, 0.16);
  --line-strong: rgba(70, 110, 145, 0.28);
  --ribbon: #3f8ec4;
}

/* ── 7. 柠檬奶油 ─────────────────────────────────────────────────── */
html[data-theme="lemon"] {
  --bg-base: #fffdf2;
  --bg-image: radial-gradient(1100px 720px at 10% 8%, #fbf1c2 0%, rgba(251, 241, 194, 0) 62%),
    radial-gradient(1000px 700px at 88% 20%, #f6f7d6 0%, rgba(246, 247, 214, 0) 60%),
    radial-gradient(900px 700px at 52% 98%, #fdf0dd 0%, rgba(253, 240, 221, 0) 58%),
    linear-gradient(140deg, #fdfae4 0%, #fffdf4 52%, #fdf7ea 100%);
  --ink: #45422c;
  --ink-2: #837d5b;
  --ink-3: #b0aa87;
  --line: rgba(140, 132, 90, 0.16);
  --line-strong: rgba(140, 132, 90, 0.28);
  --ribbon: #c9a227;
}

/* ── 8. 云杉绿 ───────────────────────────────────────────────────── */
html[data-theme="spruce"] {
  --bg-base: #f4fbf6;
  --bg-image: radial-gradient(1100px 720px at 10% 10%, #cbe8d8 0%, rgba(203, 232, 216, 0) 62%),
    radial-gradient(960px 720px at 90% 16%, #d5eccf 0%, rgba(213, 236, 207, 0) 60%),
    radial-gradient(900px 700px at 52% 100%, #eaf2dc 0%, rgba(234, 242, 220, 0) 58%),
    linear-gradient(150deg, #ebf7f0 0%, #f6fbf6 52%, #f3f8ec 100%);
  --ink: #31443a;
  --ink-2: #62796c;
  --ink-3: #8fa598;
  --line: rgba(72, 112, 92, 0.16);
  --line-strong: rgba(72, 112, 92, 0.28);
  --ribbon: #4b9268;
}

/* ── 9. 蜜桃乌龙 ─────────────────────────────────────────────────── */
html[data-theme="peach"] {
  --bg-base: #fff7f2;
  --bg-image: radial-gradient(1100px 720px at 8% 10%, #ffdfcc 0%, rgba(255, 223, 204, 0) 62%),
    radial-gradient(1000px 700px at 90% 18%, #ffe9d6 0%, rgba(255, 233, 214, 0) 60%),
    radial-gradient(900px 700px at 55% 100%, #fde6ea 0%, rgba(253, 230, 234, 0) 58%),
    linear-gradient(140deg, #fff2e8 0%, #fff9f4 52%, #fdf1ee 100%);
  --ink: #4e3a33;
  --ink-2: #8d7065;
  --ink-3: #b79b90;
  --line: rgba(158, 114, 96, 0.16);
  --line-strong: rgba(158, 114, 96, 0.28);
  --ribbon: #df7f57;
}

/* ── 10. 暮云灰紫 ────────────────────────────────────────────────── */
html[data-theme="dusk"] {
  --bg-base: #f8f7fb;
  --bg-image: radial-gradient(1100px 720px at 12% 8%, #dedbe8 0%, rgba(222, 219, 232, 0) 62%),
    radial-gradient(960px 720px at 88% 20%, #e3e2ee 0%, rgba(227, 226, 238, 0) 60%),
    radial-gradient(900px 700px at 50% 100%, #f0e6e8 0%, rgba(240, 230, 232, 0) 58%),
    linear-gradient(150deg, #f2f1f7 0%, #f9f8fc 52%, #f7f2f4 100%);
  --ink: #414050;
  --ink-2: #75738a;
  --ink-3: #a09eb3;
  --line: rgba(110, 108, 130, 0.16);
  --line-strong: rgba(110, 108, 130, 0.28);
  --ribbon: #7d7a9e;
}

/* ── 11. 极光 ────────────────────────────────────────────────────── */
html[data-theme="aurora"] {
  --bg-base: #f4fbf9;
  --bg-image: radial-gradient(1100px 720px at 8% 10%, #ccf2e6 0%, rgba(204, 242, 230, 0) 60%),
    radial-gradient(1000px 760px at 88% 12%, #dfe3ff 0%, rgba(223, 227, 255, 0) 60%),
    radial-gradient(900px 700px at 52% 100%, #ffe9f0 0%, rgba(255, 233, 240, 0) 58%),
    linear-gradient(155deg, #e9fbf3 0%, #f4f9ff 48%, #f7f2ff 100%);
  --ink: #2f4748;
  --ink-2: #5f7f85;
  --ink-3: #8fa9af;
  --line: rgba(64, 118, 118, 0.16);
  --line-strong: rgba(64, 118, 118, 0.28);
  --ribbon: #2f9e8f;
}

/* ── 12. 暗夜 ────────────────────────────────────────────────────── */
html[data-theme="night"] {
  --bg-base: #1a1e24;
  --bg-image: radial-gradient(1100px 720px at 10% 6%, #26343c 0%, rgba(38, 52, 60, 0) 62%),
    radial-gradient(1000px 720px at 90% 16%, #2c2a3c 0%, rgba(44, 42, 60, 0) 60%),
    radial-gradient(900px 700px at 50% 100%, #33292c 0%, rgba(51, 41, 44, 0) 58%),
    linear-gradient(150deg, #181c22 0%, #1e232a 52%, #22262c 100%);
  --panel-rgb: 32, 38, 46;
  --ink: #e6ebef;
  --ink-2: #a6b2bd;
  --ink-3: #7b8794;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35);
  --ribbon: #e8834a;
  --reader-paper: #22262c;
  --reader-ink: #dfe4e8;
  color-scheme: dark;
}