/* ==========================================================================
   多囊肾病友网 — 多主题系统
   通过 [data-theme] 属性覆盖 :root CSS 变量
   ========================================================================== */

/* ---------- 主题 1: 青蓝（默认） ---------- */
[data-theme="teal"] {
  --color-primary: #3a8fa3;
  --color-primary-dark: #2a6d7e;
  --color-primary-light: #eef6f9;
  --color-primary-gradient: linear-gradient(135deg, #3a8fa3 0%, #5bb5c8 100%);

  --color-accent: #e89a6c;
  --color-accent-light: #fdf0e6;
  --color-accent-gradient: linear-gradient(135deg, #e89a6c 0%, #f4b894 100%);

  --color-safe: #5ba876;
  --color-safe-bg: #eef8f2;

  --color-text: #333333;
  --color-text-light: #777777;
  --color-text-lighter: #999999;

  --color-bg: #fafbfc;
  --color-bg-alt: #f0f4f6;
  --color-bg-warm: #faf5f0;
  --color-border: #e0e8eb;
  --color-border-light: #eef2f4;

  --color-danger: #c95a5a;
  --color-danger-bg: #fdf2f1;

  --shadow-xs: 0 1px 2px rgba(42, 109, 126, 0.04);
  --shadow-sm: 0 2px 8px rgba(42, 109, 126, 0.06), 0 1px 2px rgba(42, 109, 126, 0.04);
  --shadow-md: 0 4px 16px rgba(42, 109, 126, 0.08), 0 2px 4px rgba(42, 109, 126, 0.04);
  --shadow-lg: 0 8px 32px rgba(42, 109, 126, 0.10), 0 4px 8px rgba(42, 109, 126, 0.06);
  --shadow-warm: 0 4px 16px rgba(232, 154, 108, 0.12), 0 2px 4px rgba(232, 154, 108, 0.08);
}

/* ---------- 主题 2: 暖砂 — 温暖大地色 ---------- */
[data-theme="warm"] {
  --color-primary: #b8763e;
  --color-primary-dark: #8f5a2a;
  --color-primary-light: #faf3eb;
  --color-primary-gradient: linear-gradient(135deg, #b8763e 0%, #d4985f 100%);

  --color-accent: #6b8e7f;
  --color-accent-light: #eef5f1;
  --color-accent-gradient: linear-gradient(135deg, #6b8e7f 0%, #8aaa9b 100%);

  --color-safe: #7a9a5b;
  --color-safe-bg: #f0f5ea;

  --color-text: #3d3328;
  --color-text-light: #7a6b5a;
  --color-text-lighter: #a09280;

  --color-bg: #fdfaf5;
  --color-bg-alt: #f5ede2;
  --color-bg-warm: #faf3eb;
  --color-border: #e8ddd0;
  --color-border-light: #f0e8dc;

  --color-danger: #b8553e;
  --color-danger-bg: #fdf0eb;

  --shadow-xs: 0 1px 2px rgba(143, 90, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(143, 90, 42, 0.06), 0 1px 2px rgba(143, 90, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(143, 90, 42, 0.08), 0 2px 4px rgba(143, 90, 42, 0.04);
  --shadow-lg: 0 8px 32px rgba(143, 90, 42, 0.10), 0 4px 8px rgba(143, 90, 42, 0.06);
  --shadow-warm: 0 4px 16px rgba(184, 118, 62, 0.12), 0 2px 4px rgba(184, 118, 62, 0.08);
}

/* ---------- 主题 3: 静谧蓝 — 柔和信任 ---------- */
[data-theme="blue"] {
  --color-primary: #4a6fa5;
  --color-primary-dark: #36527d;
  --color-primary-light: #eef2f8;
  --color-primary-gradient: linear-gradient(135deg, #4a6fa5 0%, #6b8fc5 100%);

  --color-accent: #d4a574;
  --color-accent-light: #faf3ea;
  --color-accent-gradient: linear-gradient(135deg, #d4a574 0%, #e8c094 100%);

  --color-safe: #5b9a7a;
  --color-safe-bg: #eef6f2;

  --color-text: #2d3340;
  --color-text-light: #6b7280;
  --color-text-lighter: #9aa0ac;

  --color-bg: #f9fafc;
  --color-bg-alt: #eef1f6;
  --color-bg-warm: #f5f0ea;
  --color-border: #dde3ec;
  --color-border-light: #eaeef4;

  --color-danger: #c25555;
  --color-danger-bg: #fdf2f1;

  --shadow-xs: 0 1px 2px rgba(54, 82, 125, 0.04);
  --shadow-sm: 0 2px 8px rgba(54, 82, 125, 0.06), 0 1px 2px rgba(54, 82, 125, 0.04);
  --shadow-md: 0 4px 16px rgba(54, 82, 125, 0.08), 0 2px 4px rgba(54, 82, 125, 0.04);
  --shadow-lg: 0 8px 32px rgba(54, 82, 125, 0.10), 0 4px 8px rgba(54, 82, 125, 0.06);
  --shadow-warm: 0 4px 16px rgba(212, 165, 116, 0.12), 0 2px 4px rgba(212, 165, 116, 0.08);
}

/* ---------- 主题 4: 自然绿 — 鼠尾草平静 ---------- */
[data-theme="green"] {
  --color-primary: #5b8a72;
  --color-primary-dark: #426b54;
  --color-primary-light: #eef5f0;
  --color-primary-gradient: linear-gradient(135deg, #5b8a72 0%, #7aaa92 100%);

  --color-accent: #c9956b;
  --color-accent-light: #faf3eb;
  --color-accent-gradient: linear-gradient(135deg, #c9956b 0%, #ddb58a 100%);

  --color-safe: #6b9a4e;
  --color-safe-bg: #eef5e8;

  --color-text: #2d3d33;
  --color-text-light: #6b7d6f;
  --color-text-lighter: #9aaa9e;

  --color-bg: #f9fbf9;
  --color-bg-alt: #eef3ef;
  --color-bg-warm: #faf5f0;
  --color-border: #dde6df;
  --color-border-light: #e8eeea;

  --color-danger: #b8554a;
  --color-danger-bg: #fdf2f0;

  --shadow-xs: 0 1px 2px rgba(66, 107, 84, 0.04);
  --shadow-sm: 0 2px 8px rgba(66, 107, 84, 0.06), 0 1px 2px rgba(66, 107, 84, 0.04);
  --shadow-md: 0 4px 16px rgba(66, 107, 84, 0.08), 0 2px 4px rgba(66, 107, 84, 0.04);
  --shadow-lg: 0 8px 32px rgba(66, 107, 84, 0.10), 0 4px 8px rgba(66, 107, 84, 0.06);
  --shadow-warm: 0 4px 16px rgba(201, 149, 107, 0.12), 0 2px 4px rgba(201, 149, 107, 0.08);
}

/* ---------- 主题 5: 墨韵 — 深色模式 ---------- */
[data-theme="dark"] {
  --color-primary: #5fa8bf;
  --color-primary-dark: #4a8a9f;
  --color-primary-light: #1a2a32;
  --color-primary-gradient: linear-gradient(135deg, #5fa8bf 0%, #7ac4d8 100%);

  --color-accent: #e0a878;
  --color-accent-light: #2a2018;
  --color-accent-gradient: linear-gradient(135deg, #e0a878 0%, #f0c094 100%);

  --color-safe: #6dba88;
  --color-safe-bg: #1a2a20;

  --color-text: #d8dde2;
  --color-text-light: #9aa4b0;
  --color-text-lighter: #6b7682;

  --color-bg: #1a1d23;
  --color-bg-alt: #232830;
  --color-bg-warm: #252220;
  --color-border: #353b45;
  --color-border-light: #2d333d;

  --color-danger: #d97070;
  --color-danger-bg: #2a1d1d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-warm: 0 4px 16px rgba(224, 168, 120, 0.15), 0 2px 4px rgba(224, 168, 120, 0.1);
}

/* 深色模式下的特殊调整 */
[data-theme="dark"] body {
  color-scheme: dark;
}
[data-theme="dark"] .medical-alert {
  background: #2a2218;
  border-color: #6b5535;
}
[data-theme="dark"] .card {
  background: #232830;
}
[data-theme="dark"] .q-card {
  background: #232830;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #232830;
  color: #d8dde2;
  border-color: #353b45;
}
[data-theme="dark"] .source-ref {
  background: #232830;
}
[data-theme="dark"] .page-hero {
  background: linear-gradient(135deg, #1a2a32 0%, #232830 100%);
}
[data-theme="dark"] .site-header {
  background: #1a1d23;
  border-color: #353b45;
}
[data-theme="dark"] .site-footer {
  background: #15171c;
  border-color: #353b45;
}

/* ---------- 主题切换面板样式 ---------- */
.theme-switcher {
  position: relative;
}
.theme-switcher__panel {
  position: fixed;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  min-width: 200px;
  z-index: 10000;
  display: none;
}
.theme-switcher__panel--open {
  display: block;
}
.theme-switcher__title {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.theme-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.2s;
  min-height: 40px;
}
.theme-switcher__option:hover,
.theme-switcher__option:focus {
  background: var(--color-bg-alt);
}
.theme-switcher__option--active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.theme-switcher__swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}
.theme-switcher__swatch--teal { background: linear-gradient(135deg, #3a8fa3, #5bb5c8); }
.theme-switcher__swatch--warm { background: linear-gradient(135deg, #b8763e, #d4985f); }
.theme-switcher__swatch--blue { background: linear-gradient(135deg, #4a6fa5, #6b8fc5); }
.theme-switcher__swatch--green { background: linear-gradient(135deg, #5b8a72, #7aaa92); }
.theme-switcher__swatch--dark { background: linear-gradient(135deg, #1a1d23, #5fa8bf); }

@media (max-width: 640px) {
  .theme-switcher__panel {
    min-width: 180px;
  }
}