/* v0.7 design tokens + skin system. No page-layout rules live here. */
:root {
  --ds-content: 1180px;
  --ds-wide: 1420px;
  --ds-reading: 820px;
  --ds-radius-sm: 14px;
  --ds-radius-md: 20px;
  --ds-radius-lg: 26px;
  --ds-space-1: 8px;
  --ds-space-2: 12px;
  --ds-space-3: 18px;
  --ds-space-4: 24px;
  --ds-space-5: 32px;
  --ds-space-6: 48px;
  --skin-bg: #edf3ff;
  --skin-card: rgba(255,255,255,.66);
  --skin-card-strong: rgba(255,255,255,.90);
  --skin-text: #26304c;
  --skin-muted: #727b96;
  --skin-accent: #7187ff;
  --skin-accent-2: #c773ed;
  --skin-border: rgba(255,255,255,.62);
  --skin-shadow: 0 18px 54px rgba(62,74,128,.17);
  --skin-shadow-soft: 0 10px 34px rgba(45,64,54,.08);
  --skin-nav: rgba(247,249,255,.76);
  --skin-radius: 22px;
  --skin-blur: 20px;
}

html[data-skin="midnight"] {
  --skin-bg: #07111f;
  --skin-card: rgba(13,25,42,.82);
  --skin-card-strong: rgba(16,30,49,.96);
  --skin-text: #edf1f7;
  --skin-muted: #a7b0bf;
  --skin-accent: #d7b56d;
  --skin-accent-2: #f0d798;
  --skin-border: rgba(222,188,113,.16);
  --skin-shadow: 0 20px 65px rgba(0,0,0,.38);
  --skin-shadow-soft: 0 12px 36px rgba(0,0,0,.24);
  --skin-nav: rgba(7,17,31,.82);
  --skin-radius: 18px;
  --skin-blur: 16px;
}

html[data-skin="washi"] {
  --skin-bg: #eee9df;
  --skin-card: rgba(250,247,240,.86);
  --skin-card-strong: rgba(255,252,245,.96);
  --skin-text: #3d3933;
  --skin-muted: #777067;
  --skin-accent: #8b5e4a;
  --skin-accent-2: #a88a5f;
  --skin-border: rgba(91,75,59,.12);
  --skin-shadow: 0 12px 34px rgba(73,58,42,.11);
  --skin-shadow-soft: 0 8px 24px rgba(73,58,42,.08);
  --skin-nav: rgba(248,244,236,.88);
  --skin-radius: 12px;
  --skin-blur: 9px;
}

html[data-skin="forest"] {
  --skin-bg: #e8efea;
  --skin-card: rgba(245,250,246,.76);
  --skin-card-strong: rgba(249,252,249,.93);
  --skin-text: #263d35;
  --skin-muted: #6c7f77;
  --skin-accent: #427b69;
  --skin-accent-2: #78a98b;
  --skin-border: rgba(80,118,101,.14);
  --skin-shadow: 0 18px 50px rgba(47,78,65,.16);
  --skin-shadow-soft: 0 10px 30px rgba(47,78,65,.10);
  --skin-nav: rgba(239,247,242,.82);
  --skin-radius: 20px;
  --skin-blur: 17px;
}

html[data-skin="neon"] {
  --skin-bg: #090712;
  --skin-card: rgba(19,15,34,.78);
  --skin-card-strong: rgba(25,18,43,.95);
  --skin-text: #f5f0ff;
  --skin-muted: #b7abc8;
  --skin-accent: #72e5ff;
  --skin-accent-2: #ff72d2;
  --skin-border: rgba(139,116,255,.22);
  --skin-shadow: 0 20px 62px rgba(0,0,0,.44);
  --skin-shadow-soft: 0 12px 36px rgba(0,0,0,.28);
  --skin-nav: rgba(10,8,20,.80);
  --skin-radius: 20px;
  --skin-blur: 19px;
}

body {
  color: var(--skin-text);
}

::selection {
  background: var(--skin-accent);
  color: #fff;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(var(--skin-accent), var(--skin-accent-2)) !important;
}

.appearance-switcher {
  position: fixed;
  left: 22px;
  bottom: 24px;
  z-index: 1002;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  font-family: inherit;
}

.skin-switcher,
.bg-switcher {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
}

.skin-toggle,
.bg-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--skin-border);
  border-radius: 50%;
  background: var(--skin-card-strong);
  color: var(--skin-text);
  box-shadow: var(--skin-shadow);
  cursor: pointer;
  backdrop-filter: blur(var(--skin-blur));
  -webkit-backdrop-filter: blur(var(--skin-blur));
  transition: transform .2s ease, box-shadow .2s ease;
}

.skin-toggle:hover {
  transform: translateY(-2px) rotate(8deg);
}

.bg-toggle:hover {
  transform: translateY(-2px) rotate(-7deg);
}

.skin-panel,
.bg-panel {
  position: absolute;
  left: 0;
  bottom: 58px;
  width: 270px;
  padding: 14px;
  border: 1px solid var(--skin-border);
  border-radius: 18px;
  background: var(--skin-card-strong);
  color: var(--skin-text);
  box-shadow: var(--skin-shadow);
  backdrop-filter: blur(calc(var(--skin-blur) + 4px));
  -webkit-backdrop-filter: blur(calc(var(--skin-blur) + 4px));
  transform-origin: left bottom;
  transition: opacity .18s ease, transform .18s ease;
}

.skin-panel[hidden],
.bg-panel[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
}

.skin-panel-title,
.bg-panel-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--skin-muted);
}

.skin-options,
.bg-options {
  display: grid;
  gap: 8px;
}

.skin-option,
.bg-option {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--skin-text);
  cursor: pointer;
  text-align: left;
}

.skin-option:hover,
.skin-option.is-active,
.bg-option:hover,
.bg-option.is-active {
  border-color: var(--skin-border);
  background: color-mix(in srgb, var(--skin-accent) 10%, transparent);
}

.skin-option small,
.bg-option small {
  color: var(--skin-muted);
  font-size: 11px;
}

.skin-swatch,
.bg-swatch {
  width: 40px;
  height: 26px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.skin-swatch.aurora { background: linear-gradient(135deg,#7187ff,#c773ed,#3aa6b6); }
.skin-swatch.midnight { background: linear-gradient(135deg,#07111f,#172a45,#d7b56d); }
.skin-swatch.washi { background: linear-gradient(135deg,#eee9df,#c3aa86,#6d7b68); }
.skin-swatch.forest { background: linear-gradient(135deg,#274e47,#78a98b,#d9e8dd); }
.skin-swatch.neon { background: linear-gradient(135deg,#11102c,#ff72d2,#72e5ff); }
.bg-swatch.sky { background: linear-gradient(135deg,#bfe3f3,#f8faf4 52%,#cfe6cf); }
.bg-swatch.grove { background: linear-gradient(135deg,#9dc5a2,#f3edda 55%,#d7e7d4); }
.bg-swatch.mist { background: linear-gradient(135deg,#a9cbdc,#edf2f4 52%,#c8d2d0); }