/* =========================================================
   静读 · 配色皮肤
   只覆盖颜色变量与皮肤选择器；字体、间距、布局保持不变。
   ========================================================= */

/* ---------------------------------------------------------
   青瓷 · 雾绿 / 松石
   --------------------------------------------------------- */

html[data-skin="celadon"] {
  --bg: #eef3ee;
  --paper: #f9fbf7;
  --paper-raised: #fdfefb;
  --sidebar: #e5ece5;
  --ink: #222a24;
  --ink-soft: #4f5d52;
  --muted: #7c8a7e;
  --faint: #a3b0a5;
  --line: #d8e2d8;
  --line-strong: #c3d1c4;
  --accent: #2f6f5e;
  --accent-hover: #24594b;
  --accent-soft: rgba(47, 111, 94, 0.11);
  --accent-softer: rgba(47, 111, 94, 0.06);
  --gold: #8b7434;
  --code-bg: #1d251f;
  --code-head: #273229;
  --code-ink: #edf3ed;
  --code-muted: #9aaa9d;
  --shadow-sm: 0 1px 2px rgba(35, 54, 40, 0.06);
  --shadow-lg: 0 24px 70px rgba(35, 54, 40, 0.18);
  --focus: 0 0 0 3px rgba(47, 111, 94, 0.22);
  color-scheme: light;
}

html[data-skin="celadon"][data-theme="dark"] {
  --bg: #111713;
  --paper: #1a211b;
  --paper-raised: #222b23;
  --sidebar: #151c16;
  --ink: #e8efe8;
  --ink-soft: #b9c6ba;
  --muted: #8b998d;
  --faint: #667368;
  --line: #2d372e;
  --line-strong: #425044;
  --accent: #79b8a2;
  --accent-hover: #93cbb7;
  --accent-soft: rgba(121, 184, 162, 0.13);
  --accent-softer: rgba(121, 184, 162, 0.07);
  --gold: #d0b36b;
  --code-bg: #0d120e;
  --code-head: #151d16;
  --code-ink: #e8f0e9;
  --code-muted: #8d9c90;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.48);
  --focus: 0 0 0 3px rgba(121, 184, 162, 0.24);
  color-scheme: dark;
}

/* ---------------------------------------------------------
   靛蓝 · 冷纸 / 远山
   --------------------------------------------------------- */

html[data-skin="indigo"] {
  --bg: #eef1f7;
  --paper: #f9fafd;
  --paper-raised: #ffffff;
  --sidebar: #e4e9f2;
  --ink: #232835;
  --ink-soft: #505969;
  --muted: #7c8698;
  --faint: #a0a9b8;
  --line: #dbe1eb;
  --line-strong: #c5cedd;
  --accent: #415f91;
  --accent-hover: #334d78;
  --accent-soft: rgba(65, 95, 145, 0.11);
  --accent-softer: rgba(65, 95, 145, 0.06);
  --gold: #8b7434;
  --code-bg: #1c2330;
  --code-head: #263142;
  --code-ink: #eef2f8;
  --code-muted: #9aa7ba;
  --shadow-sm: 0 1px 2px rgba(28, 40, 62, 0.06);
  --shadow-lg: 0 24px 70px rgba(28, 40, 62, 0.18);
  --focus: 0 0 0 3px rgba(65, 95, 145, 0.22);
  color-scheme: light;
}

html[data-skin="indigo"][data-theme="dark"] {
  --bg: #11151c;
  --paper: #191f29;
  --paper-raised: #222a36;
  --sidebar: #141923;
  --ink: #e7ebf3;
  --ink-soft: #b8c0ce;
  --muted: #8792a3;
  --faint: #636e7f;
  --line: #2b3340;
  --line-strong: #3f4a5b;
  --accent: #8fb1e8;
  --accent-hover: #aac5f1;
  --accent-soft: rgba(143, 177, 232, 0.13);
  --accent-softer: rgba(143, 177, 232, 0.07);
  --gold: #d0b36b;
  --code-bg: #0d1119;
  --code-head: #151c27;
  --code-ink: #e7edf7;
  --code-muted: #8b98aa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);
  --focus: 0 0 0 3px rgba(143, 177, 232, 0.24);
  color-scheme: dark;
}

/* ---------------------------------------------------------
   梅子 · 灰粉 / 胭脂
   --------------------------------------------------------- */

html[data-skin="plum"] {
  --bg: #f4eef1;
  --paper: #fbf7f9;
  --paper-raised: #fffdfe;
  --sidebar: #eee2e7;
  --ink: #2b2428;
  --ink-soft: #5e5056;
  --muted: #8b7880;
  --faint: #b09ca4;
  --line: #e3d4da;
  --line-strong: #d2bec7;
  --accent: #8c4a5e;
  --accent-hover: #763c4e;
  --accent-soft: rgba(140, 74, 94, 0.11);
  --accent-softer: rgba(140, 74, 94, 0.06);
  --gold: #9a7432;
  --code-bg: #261e23;
  --code-head: #33272d;
  --code-ink: #f5edf0;
  --code-muted: #b4a0a8;
  --shadow-sm: 0 1px 2px rgba(53, 34, 42, 0.06);
  --shadow-lg: 0 24px 70px rgba(53, 34, 42, 0.18);
  --focus: 0 0 0 3px rgba(140, 74, 94, 0.22);
  color-scheme: light;
}

html[data-skin="plum"][data-theme="dark"] {
  --bg: #171214;
  --paper: #211a1d;
  --paper-raised: #2a2226;
  --sidebar: #1c1518;
  --ink: #f0e8eb;
  --ink-soft: #c9b9c0;
  --muted: #9a858e;
  --faint: #736069;
  --line: #372c31;
  --line-strong: #4d3d44;
  --accent: #d58aa0;
  --accent-hover: #e4a4b6;
  --accent-soft: rgba(213, 138, 160, 0.13);
  --accent-softer: rgba(213, 138, 160, 0.07);
  --gold: #d0b36b;
  --code-bg: #100c0e;
  --code-head: #1a1417;
  --code-ink: #f1e7eb;
  --code-muted: #a28c95;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);
  --focus: 0 0 0 3px rgba(213, 138, 160, 0.24);
  color-scheme: dark;
}

/* ---------------------------------------------------------
   墨印 · 无彩 / 墨痕
   --------------------------------------------------------- */

html[data-skin="ink"] {
  --bg: #efefec;
  --paper: #fbfbf8;
  --paper-raised: #ffffff;
  --sidebar: #e6e6e1;
  --ink: #222220;
  --ink-soft: #55554f;
  --muted: #83837b;
  --faint: #a9a9a1;
  --line: #ddddd6;
  --line-strong: #c9c9c0;
  --accent: #4a4a45;
  --accent-hover: #33332f;
  --accent-soft: rgba(58, 58, 53, 0.09);
  --accent-softer: rgba(58, 58, 53, 0.05);
  --gold: #8b7434;
  --code-bg: #22221f;
  --code-head: #2e2e2a;
  --code-ink: #f0efe8;
  --code-muted: #a8a69c;
  --shadow-sm: 0 1px 2px rgba(32, 32, 29, 0.06);
  --shadow-lg: 0 24px 70px rgba(32, 32, 29, 0.18);
  --focus: 0 0 0 3px rgba(74, 74, 69, 0.2);
  color-scheme: light;
}

html[data-skin="ink"][data-theme="dark"] {
  --bg: #121211;
  --paper: #1b1b19;
  --paper-raised: #242421;
  --sidebar: #171715;
  --ink: #eceae3;
  --ink-soft: #bcb9b0;
  --muted: #8c8a81;
  --faint: #68665f;
  --line: #302f2b;
  --line-strong: #46453f;
  --accent: #c9c9bd;
  --accent-hover: #e4e2d9;
  --accent-soft: rgba(201, 201, 189, 0.12);
  --accent-softer: rgba(201, 201, 189, 0.07);
  --gold: #d0b36b;
  --code-bg: #0e0e0c;
  --code-head: #161614;
  --code-ink: #eeece5;
  --code-muted: #96948a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);
  --focus: 0 0 0 3px rgba(201, 201, 189, 0.24);
  color-scheme: dark;
}

/* ---------------------------------------------------------
   Skin picker
   --------------------------------------------------------- */

.skin-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.skin-button {
  position: relative;
}

.skin-button::after {
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
  content: "";
  pointer-events: none;
}

.skin-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 16px);
  right: 0;
  width: 300px;
  padding: 14px;
  border: 1px solid var(--line);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  border-radius: 10px;
  background: var(--paper-raised);
  box-shadow: var(--shadow-lg);
  animation: skin-menu-in 150ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.skin-menu[hidden] {
  display: none;
}

@keyframes skin-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skin-menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.skin-menu-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.skin-menu-hint {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.skin-option {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}

.skin-option:hover {
  border-color: var(--line);
  background: var(--accent-softer);
}

.skin-option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
}

.skin-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.skin-swatch {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 6px;
  background: var(--swatch-bg);
}

.skin-swatch i {
  display: block;
}

.skin-swatch i:nth-child(1) {
  grid-row: 1 / 3;
  background: var(--swatch-accent);
}

.skin-swatch i:nth-child(2) {
  background: var(--swatch-bg);
}

.skin-swatch i:nth-child(3) {
  background: var(--swatch-ink);
}

.skin-option[data-skin="paper"] {
  --swatch-bg: #f3efe5;
  --swatch-accent: #b1462f;
  --swatch-ink: #2a2720;
}

.skin-option[data-skin="celadon"] {
  --swatch-bg: #eef3ee;
  --swatch-accent: #2f6f5e;
  --swatch-ink: #222a24;
}

.skin-option[data-skin="indigo"] {
  --swatch-bg: #eef1f7;
  --swatch-accent: #415f91;
  --swatch-ink: #232835;
}

.skin-option[data-skin="plum"] {
  --swatch-bg: #f4eef1;
  --swatch-accent: #8c4a5e;
  --swatch-ink: #2b2428;
}

.skin-option[data-skin="ink"] {
  --swatch-bg: #efefec;
  --swatch-accent: #4a4a45;
  --swatch-ink: #222220;
}

.skin-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.skin-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-check {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-left: auto;
  color: var(--accent);
  opacity: 0;
}

.skin-option[aria-pressed="true"] .skin-check {
  opacity: 1;
}

.skin-menu-foot {
  margin: 11px 1px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 9.5px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .skin-menu {
    width: min(300px, calc(100vw - 26px));
  }
}

@media (max-width: 640px) {
  .skin-menu {
    right: -2px;
    width: min(288px, calc(100vw - 22px));
    padding: 12px;
    border-radius: 9px;
  }

  .skin-grid {
    gap: 5px;
  }

  .skin-option {
    gap: 7px;
    padding: 6px;
  }

  .skin-swatch {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .skin-copy small {
    display: none;
  }

  .skin-menu-hint {
    font-size: 8.5px;
  }
}

@media (max-width: 360px) {
  .skin-menu {
    position: fixed;
    top: 72px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 88px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skin-menu {
    animation: none;
  }
}