/* ============================================================
   翊尧学习工作台 — 主题系统
   设计令牌 + 5 套配色方案 + 主题选择面板样式
   全部颜色/字号走 CSS 变量，换肤只改变量不动结构
   ============================================================ */

/* ---------- 基础令牌（结构/字号，与主题无关） ---------- */
:root {
  /* 字号阶梯：根字号 17px，1rem = 17px。所有字体用 rem，跟随根字号整体缩放 */
  --fs-2xs: 0.688rem;   /* ~11.7px 极小标签 */
  --fs-xs:  0.75rem;    /* ~12.8px 小标签 */
  --fs-sm:  0.8125rem;  /* ~13.8px 辅助说明 */
  --fs-md:  0.875rem;   /* ~14.9px 正文 */
  --fs-lg:  0.9375rem;  /* ~15.9px 列表标题 */
  --fs-xl:  1rem;       /* 17px    强调正文 */
  --fs-2xl: 1.1875rem;  /* ~20.2px 卡片标题 */
  --fs-3xl: 1.375rem;   /* ~23.4px 页面标题 */
  --fs-4xl: 1.6875rem;  /* ~28.7px 大数字 */
  --fs-5xl: 2.375rem;   /* ~40.4px 默写大字 */

  /* 字体族 */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-kai: "Kaiti SC", "KaiTi", "STKaiti", "Songti SC", var(--font-sans);

  /* 圆角 */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* 间距节奏 */
  --gap: 18px;
  --page-max: 880px;
}

/* 字号档位：小 / 标准 / 大 / 特大 */
html { font-size: 17px; }
html[data-fs="sm"] { font-size: 15.5px; }
html[data-fs="md"] { font-size: 17px; }
html[data-fs="lg"] { font-size: 18.5px; }
html[data-fs="xl"] { font-size: 20.5px; }

/* ============================================================
   主题 1 · 暖阳米棕（默认）— 暖调护眼，长时间阅读舒服
   ============================================================ */
html[data-theme="warm"] {
  color-scheme: light;
  --bg: #f5f1e9;
  --bg-g1: #f1e3cb;
  --bg-g2: #e9e3d3;

  --ink: #4a4239;
  --ink-soft: #8b8175;
  --ink-faint: #aba193;

  --accent: #986d3e;
  --accent-deep: #8f6335;
  --accent-tint: rgba(192, 138, 78, .14);
  --accent-tint-2: rgba(192, 138, 78, .26);
  --on-accent: #ffffff;

  --warm: #dfb389;
  --warm-tint: rgba(223, 179, 137, .18);

  --panel: rgba(255, 255, 255, .62);
  --panel-border: rgba(255, 255, 255, .78);
  --card: rgba(255, 255, 255, .80);
  --card-border: rgba(255, 255, 255, .9);
  --surface: #fffdf9;
  --modal-bg: #fbf8f2;

  --shadow: 0 6px 24px rgba(126, 108, 78, .13);
  --shadow-lg: 0 18px 48px rgba(126, 108, 78, .22);
  --shadow-color: rgba(126, 108, 78, .13);

  --ok: #6f9a5e;      --ok-tint: rgba(111, 154, 94, .18);
  --warn: #b8894a;    --warn-tint: rgba(184, 137, 74, .18);
  --danger: #b96a5a;  --danger-tint: rgba(185, 106, 90, .17);
  --info: #6a8fa8;    --info-tint: rgba(106, 143, 168, .16);

  --scrim: rgba(74, 62, 44, .38);
  --toast-bg: rgba(74, 64, 50, .93);
  --stage-bg: #2f2a24;

  --art-sun: #f3ddb4;
  --art-hill1: #e0e4d2;
  --art-hill2: #d2d8c2;
  --art-desk: #c3ae93;
  --art-desk2: #ab9679;
  --art-lamp: #cdb99d;
  --art-lamp2: #eadbb8;
  --art-book1: #b3c6bb;
  --art-book2: #dcbda9;
  --art-book3: #bcc6d8;
  --art-cup: #c8d1dc;
  --art-pencil: #adbacb;
  --art-plant: #a2bd9f;
  --art-pot: #cbb89f;
  --art-bird: #dcc9b1;
  --art-bird-eye: #8b7660;
}

/* ============================================================
   主题 2 · 青瓷薄荷 — 清爽通透，接近原来的低饱和风格
   ============================================================ */
html[data-theme="celadon"] {
  color-scheme: light;
  --bg: #eef3f1;
  --bg-g1: #dbe9e4;
  --bg-g2: #e2edf0;

  --ink: #3d4845;
  --ink-soft: #7c8a86;
  --ink-faint: #9fabaa;

  --accent: #4d7f75;
  --accent-deep: #42756b;
  --accent-tint: rgba(95, 156, 143, .15);
  --accent-tint-2: rgba(95, 156, 143, .28);
  --on-accent: #ffffff;

  --warm: #d3a06a;
  --warm-tint: rgba(211, 160, 106, .18);

  --panel: rgba(255, 255, 255, .58);
  --panel-border: rgba(255, 255, 255, .74);
  --card: rgba(255, 255, 255, .78);
  --card-border: rgba(255, 255, 255, .9);
  --surface: #fcfefd;
  --modal-bg: #f7fbf9;

  --shadow: 0 6px 24px rgba(78, 106, 100, .13);
  --shadow-lg: 0 18px 48px rgba(78, 106, 100, .22);
  --shadow-color: rgba(78, 106, 100, .13);

  --ok: #6f9a7e;      --ok-tint: rgba(111, 154, 126, .18);
  --warn: #a58a52;    --warn-tint: rgba(165, 138, 82, .18);
  --danger: #b9705f;  --danger-tint: rgba(185, 112, 95, .17);
  --info: #5d8ba3;    --info-tint: rgba(93, 139, 163, .16);

  --scrim: rgba(52, 68, 64, .35);
  --toast-bg: rgba(56, 70, 66, .93);
  --stage-bg: #262b29;

  --art-sun: #f2e5c6;
  --art-hill1: #d5e3d9;
  --art-hill2: #c4d6cc;
  --art-desk: #b7a894;
  --art-desk2: #9e8f7b;
  --art-lamp: #c6b49c;
  --art-lamp2: #e9d9b7;
  --art-book1: #a9c4bb;
  --art-book2: #d8b8a8;
  --art-book3: #b8c4d8;
  --art-cup: #c4d0dc;
  --art-pencil: #a8b8c8;
  --art-plant: #9dbba5;
  --art-pot: #c8b8a4;
  --art-bird: #d8c8b4;
  --art-bird-eye: #8a7a66;
}

/* ============================================================
   主题 3 · 靛蓝夜读 — 深色模式，晚上学习不刺眼
   ============================================================ */
html[data-theme="indigo"] {
  color-scheme: dark;
  --bg: #141a2c;
  --bg-g1: #1e2a4d;
  --bg-g2: #16303f;

  --ink: #e7eaf4;
  --ink-soft: #9ba5c2;
  --ink-faint: #77809b;

  --accent: #7d9dff;
  --accent-deep: #a3b8ff;
  --accent-tint: rgba(125, 157, 255, .18);
  --accent-tint-2: rgba(125, 157, 255, .32);
  --on-accent: #10162a;

  --warm: #e0b58c;
  --warm-tint: rgba(224, 181, 140, .18);

  --panel: rgba(255, 255, 255, .055);
  --panel-border: rgba(255, 255, 255, .11);
  --card: rgba(255, 255, 255, .075);
  --card-border: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .09);
  --modal-bg: #1b2236;

  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .6);
  --shadow-color: rgba(0, 0, 0, .45);

  --ok: #78c48c;      --ok-tint: rgba(120, 196, 140, .2);
  --warn: #e0b269;    --warn-tint: rgba(224, 178, 105, .2);
  --danger: #e88b7a;  --danger-tint: rgba(232, 139, 122, .2);
  --info: #6fb6d8;    --info-tint: rgba(111, 182, 216, .2);

  --scrim: rgba(6, 10, 22, .62);
  --toast-bg: rgba(30, 38, 60, .95);
  --stage-bg: #0d1120;

  --art-sun: #3a4272;
  --art-hill1: #26314f;
  --art-hill2: #1f2842;
  --art-desk: #4a4760;
  --art-desk2: #38364c;
  --art-lamp: #565270;
  --art-lamp2: #8c7f6a;
  --art-book1: #3d5a63;
  --art-book2: #63474f;
  --art-book3: #3f4a68;
  --art-cup: #475065;
  --art-pencil: #495672;
  --art-plant: #3f6350;
  --art-pot: #5b4d46;
  --art-bird: #6a5f52;
  --art-bird-eye: #2a2530;
}

/* ============================================================
   主题 4 · 樱粉春暖 — 柔和粉紫，小朋友看着轻松
   ============================================================ */
html[data-theme="sakura"] {
  color-scheme: light;
  --bg: #fdf3f5;
  --bg-g1: #fadfe7;
  --bg-g2: #e9e3f7;

  --ink: #51404a;
  --ink-soft: #8e7d89;
  --ink-faint: #b0a1ab;

  --accent: #ab5d7d;
  --accent-deep: #a75377;
  --accent-tint: rgba(212, 116, 155, .15);
  --accent-tint-2: rgba(212, 116, 155, .28);
  --on-accent: #ffffff;

  --warm: #e8a877;
  --warm-tint: rgba(232, 168, 119, .19);

  --panel: rgba(255, 255, 255, .62);
  --panel-border: rgba(255, 255, 255, .78);
  --card: rgba(255, 255, 255, .8);
  --card-border: rgba(255, 255, 255, .92);
  --surface: #fffafb;
  --modal-bg: #fdf6f8;

  --shadow: 0 6px 24px rgba(150, 105, 125, .14);
  --shadow-lg: 0 18px 48px rgba(150, 105, 125, .24);
  --shadow-color: rgba(150, 105, 125, .14);

  --ok: #7ba56a;      --ok-tint: rgba(123, 165, 106, .18);
  --warn: #c08a52;    --warn-tint: rgba(192, 138, 82, .18);
  --danger: #d16a72;  --danger-tint: rgba(209, 106, 114, .18);
  --info: #7f8fc4;    --info-tint: rgba(127, 143, 196, .17);

  --scrim: rgba(80, 56, 68, .36);
  --toast-bg: rgba(80, 58, 68, .93);
  --stage-bg: #332b30;

  --art-sun: #f8dfd2;
  --art-hill1: #dfe3d5;
  --art-hill2: #d0d7c4;
  --art-desk: #c9ae9a;
  --art-desk2: #ac9080;
  --art-lamp: #d3b6a4;
  --art-lamp2: #f4ddc9;
  --art-book1: #b9cbc4;
  --art-book2: #e2b8c4;
  --art-book3: #c6c0dc;
  --art-cup: #d2ccdc;
  --art-pencil: #bcb4cc;
  --art-plant: #a8c3a4;
  --art-pot: #d0b6a4;
  --art-bird: #e0c9b6;
  --art-bird-eye: #8b6f66;
}

/* ============================================================
   主题 5 · 学院藏蓝 — 清爽规整，高对比度，适合做卷子
   ============================================================ */
html[data-theme="academy"] {
  color-scheme: light;
  --bg: #eef1f7;
  --bg-g1: #dce4f2;
  --bg-g2: #e3eaf3;

  --ink: #333c4d;
  --ink-soft: #737f99;
  --ink-faint: #9aa4b9;

  --accent: #4a6fa5;
  --accent-deep: #39577f;
  --accent-tint: rgba(74, 111, 165, .13);
  --accent-tint-2: rgba(74, 111, 165, .24);
  --on-accent: #ffffff;

  --warm: #c99a63;
  --warm-tint: rgba(201, 154, 99, .18);

  --panel: rgba(255, 255, 255, .66);
  --panel-border: rgba(255, 255, 255, .8);
  --card: rgba(255, 255, 255, .82);
  --card-border: rgba(255, 255, 255, .94);
  --surface: #fcfdff;
  --modal-bg: #f7f9fd;

  --shadow: 0 6px 22px rgba(74, 96, 130, .13);
  --shadow-lg: 0 18px 46px rgba(74, 96, 130, .22);
  --shadow-color: rgba(74, 96, 130, .13);

  --ok: #5d8f6b;      --ok-tint: rgba(93, 143, 107, .17);
  --warn: #a87f42;    --warn-tint: rgba(168, 127, 66, .18);
  --danger: #b8605c;  --danger-tint: rgba(184, 96, 92, .17);
  --info: #4f7ba5;    --info-tint: rgba(79, 123, 165, .15);

  --scrim: rgba(40, 52, 74, .36);
  --toast-bg: rgba(46, 58, 80, .93);
  --stage-bg: #252b36;

  --art-sun: #e4dcc0;
  --art-hill1: #d5dde4;
  --art-hill2: #c6d1db;
  --art-desk: #b3aa96;
  --art-desk2: #9b917d;
  --art-lamp: #bfb6a6;
  --art-lamp2: #e6dec6;
  --art-book1: #a8bcc9;
  --art-book2: #d6b6a8;
  --art-book3: #b5c0d4;
  --art-cup: #c0cad6;
  --art-pencil: #a4b0c2;
  --art-plant: #9ab59c;
  --art-pot: #c0b3a0;
  --art-bird: #d3c6b3;
  --art-bird-eye: #82796a;
}

/* ============================================================
   主题选择面板
   ============================================================ */
.theme-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 12px; font-size: var(--fs-md); color: var(--ink);
  padding: 6px 12px; cursor: pointer; backdrop-filter: blur(8px);
  transition: background .18s ease, transform .18s ease;
  font-family: inherit;
}
.theme-btn:hover { background: var(--accent-tint); transform: translateY(-1px); }
.theme-btn .swatch-dot {
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5) inset, 0 1px 3px rgba(0, 0, 0, .2);
  flex-shrink: 0;
}
.theme-btn .theme-label { color: var(--ink); font-weight: 500; }

.theme-mask {
  position: fixed; inset: 0; z-index: 190;
  background: transparent;
}
.theme-panel {
  position: fixed; z-index: 200;
  top: 60px; right: 22px;
  width: min(360px, calc(100vw - 28px));
  background: var(--modal-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 18px 16px;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  animation: themePop .22s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes themePop {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.theme-panel h3 { font-size: var(--fs-xl); margin-bottom: 3px; color: var(--ink); }
.theme-panel .tp-sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 14px; line-height: 1.6; }

.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-card {
  border: 1.5px solid var(--panel-border); border-radius: var(--radius);
  background: var(--card); padding: 10px; cursor: pointer; text-align: left;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  font-family: inherit; width: 100%;
}
.theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.tc-preview {
  height: 52px; border-radius: var(--radius-sm); overflow: hidden;
  display: flex; align-items: flex-end; gap: 4px; padding: 7px;
  margin-bottom: 8px;
}
.tc-preview i { display: block; width: 14px; border-radius: 4px 4px 0 0; }
.tc-name { font-size: var(--fs-md); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 5px; }
.tc-desc { font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }
.theme-card.on .tc-name::after { content: '✓'; color: var(--accent-deep); font-weight: 700; }

.fs-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--panel-border); }
.fs-block .fs-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.fs-block .fs-hint { font-size: var(--fs-2xs); color: var(--ink-soft); margin-bottom: 9px; }
.fs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fs-btn {
  border: 1px solid var(--panel-border); background: var(--card); color: var(--ink);
  border-radius: var(--radius-sm); padding: 8px 4px; cursor: pointer;
  font-size: var(--fs-sm); font-family: inherit; line-height: 1.3;
  transition: all .16s ease;
}
.fs-btn:hover { border-color: var(--accent); }
.fs-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.fs-btn small { display: block; font-size: var(--fs-2xs); opacity: .75; margin-top: 2px; }
.fs-btn.on small { opacity: .9; }

.theme-note {
  margin-top: 14px; font-size: var(--fs-2xs); color: var(--ink-soft);
  line-height: 1.6; background: var(--accent-tint); border-radius: var(--radius-sm);
  padding: 9px 11px;
}