/* 非默认主题：由 js/h5-theme.js 设置 html[data-h5-theme]，覆盖 app.css :root 变量 */

html[data-h5-theme="ocean"] {
  --header-gradient: linear-gradient(125deg, #0ea5e9 0%, #06b6d4 48%, #0891b2 100%);
  --page-bg: #ecfeff;
  --tab-active: #0d9488;
  --tab-glow-a: rgba(13, 148, 136, 0.78);
  --tab-glow-b: rgba(45, 212, 191, 0.52);
  --tab-glow-c: rgba(15, 118, 110, 0.42);
  --btn-primary-bg: linear-gradient(165deg, #5eead4 0%, #14b8a6 100%);
  --btn-primary-shadow: 0 8px 14px rgba(20, 184, 166, 0.28), 0 2px 4px rgba(13, 148, 136, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --btn-primary-border: rgba(13, 148, 136, 0.45);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 253, 250, 0.97) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.98) 0%, rgba(204, 251, 241, 0.35) 45%, rgba(236, 253, 245, 0.92) 100%);
}

html[data-h5-theme="sunset"] {
  --header-gradient: linear-gradient(125deg, #fb923c 0%, #f472b6 48%, #ec4899 100%);
  --page-bg: #fff7ed;
  --tab-active: #c2410c;
  --tab-glow-a: rgba(234, 88, 12, 0.72);
  --tab-glow-b: rgba(251, 146, 60, 0.5);
  --tab-glow-c: rgba(154, 52, 18, 0.4);
  --btn-primary-bg: linear-gradient(165deg, #fdba74 0%, #f97316 100%);
  --btn-primary-shadow: 0 8px 14px rgba(249, 115, 22, 0.28), 0 2px 4px rgba(234, 88, 12, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --btn-primary-border: rgba(249, 115, 22, 0.42);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 247, 237, 0.96) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 237, 213, 0.55) 40%, rgba(254, 243, 199, 0.9) 100%);
}

html[data-h5-theme="forest"] {
  --header-gradient: linear-gradient(125deg, #22c55e 0%, #16a34a 45%, #15803d 100%);
  --page-bg: #f0fdf4;
  --tab-active: #166534;
  --tab-glow-a: rgba(22, 163, 74, 0.78);
  --tab-glow-b: rgba(74, 222, 128, 0.5);
  --tab-glow-c: rgba(21, 128, 61, 0.42);
  --btn-primary-bg: linear-gradient(165deg, #86efac 0%, #22c55e 100%);
  --btn-primary-shadow: 0 8px 14px rgba(34, 197, 94, 0.26), 0 2px 4px rgba(22, 163, 74, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --btn-primary-border: rgba(34, 197, 94, 0.42);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 253, 244, 0.96) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(220, 252, 231, 0.5) 42%, rgba(236, 253, 245, 0.94) 100%);
}

html[data-h5-theme="violet"] {
  --header-gradient: linear-gradient(125deg, #8b5cf6 0%, #7c3aed 45%, #6d28d9 100%);
  --page-bg: #f5f3ff;
  --tab-active: #6d28d9;
  --tab-glow-a: rgba(124, 58, 237, 0.75);
  --tab-glow-b: rgba(167, 139, 250, 0.52);
  --tab-glow-c: rgba(91, 33, 182, 0.4);
  --btn-primary-bg: linear-gradient(165deg, #c4b5fd 0%, #8b5cf6 100%);
  --btn-primary-shadow: 0 8px 14px rgba(139, 92, 246, 0.28), 0 2px 4px rgba(124, 58, 237, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --btn-primary-border: rgba(139, 92, 246, 0.45);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 243, 255, 0.97) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(237, 233, 254, 0.55) 40%, rgba(245, 243, 255, 0.94) 100%);
}

/* 暗夜：主区浅色字；白底按钮/底栏用 --text-on-light（app.css） */
html[data-h5-theme="midnight"] {
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-on-light: #0f172a;
  --text-muted-on-light: #334155;
  --accent-pink: #f472b6;
  --accent-pink-dark: #db2777;
  --header-gradient: linear-gradient(125deg, #1e293b 0%, #0f172a 48%, #020617 100%);
  --page-bg: #0f172a;
  --tab-active: #1e40af;
  --tab-glow-a: rgba(30, 64, 175, 0.78);
  --tab-glow-b: rgba(59, 130, 246, 0.52);
  --tab-glow-c: rgba(37, 99, 235, 0.4);
  --btn-primary-bg: linear-gradient(165deg, #64748b 0%, #334155 100%);
  --btn-primary-shadow: 0 8px 14px rgba(15, 23, 42, 0.45), 0 2px 4px rgba(30, 41, 59, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --btn-primary-border: rgba(148, 163, 184, 0.45);
  --card-surface: linear-gradient(165deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.99) 100%);
  --card-elevated: linear-gradient(158deg, rgba(51, 65, 85, 0.65) 0%, rgba(30, 41, 59, 0.95) 45%, rgba(15, 23, 42, 0.98) 100%);
}

html[data-h5-theme="crimson"] {
  --header-gradient: linear-gradient(125deg, #ef4444 0%, #dc2626 45%, #b91c1c 100%);
  --page-bg: #fef2f2;
  --tab-active: #991b1b;
  --tab-glow-a: rgba(220, 38, 38, 0.72);
  --tab-glow-b: rgba(248, 113, 113, 0.5);
  --tab-glow-c: rgba(127, 29, 29, 0.42);
  --btn-primary-bg: linear-gradient(165deg, #fca5a5 0%, #ef4444 100%);
  --btn-primary-shadow: 0 8px 14px rgba(239, 68, 68, 0.3), 0 2px 4px rgba(185, 28, 28, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --btn-primary-border: rgba(239, 68, 68, 0.45);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(254, 242, 242, 0.97) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(254, 226, 226, 0.55) 40%, rgba(254, 242, 242, 0.94) 100%);
}

html[data-h5-theme="amber"] {
  --header-gradient: linear-gradient(125deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%);
  --page-bg: #fffbeb;
  --tab-active: #b45309;
  --tab-glow-a: rgba(217, 119, 6, 0.72);
  --tab-glow-b: rgba(251, 191, 36, 0.52);
  --tab-glow-c: rgba(146, 64, 14, 0.4);
  --btn-primary-bg: linear-gradient(165deg, #fde68a 0%, #f59e0b 100%);
  --btn-primary-shadow: 0 8px 14px rgba(245, 158, 11, 0.32), 0 2px 4px rgba(180, 83, 9, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --btn-primary-border: rgba(245, 158, 11, 0.45);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 251, 235, 0.97) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(254, 243, 199, 0.55) 40%, rgba(255, 251, 235, 0.94) 100%);
}

html[data-h5-theme="rose"] {
  --header-gradient: linear-gradient(125deg, #fb7185 0%, #f43f5e 45%, #be123c 100%);
  --page-bg: #fff1f2;
  --tab-active: #be123c;
  --tab-glow-a: rgba(244, 63, 94, 0.72);
  --tab-glow-b: rgba(251, 113, 133, 0.52);
  --tab-glow-c: rgba(159, 18, 57, 0.4);
  --btn-primary-bg: linear-gradient(165deg, #fda4af 0%, #f43f5e 100%);
  --btn-primary-shadow: 0 8px 14px rgba(244, 63, 94, 0.28), 0 2px 4px rgba(190, 18, 60, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --btn-primary-border: rgba(244, 63, 94, 0.45);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 241, 242, 0.97) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(254, 205, 211, 0.5) 40%, rgba(255, 241, 242, 0.94) 100%);
}

html[data-h5-theme="slate"] {
  --header-gradient: linear-gradient(125deg, #94a3b8 0%, #64748b 45%, #475569 100%);
  --page-bg: #f8fafc;
  --tab-active: #166534;
  --tab-glow-a: rgba(22, 101, 52, 0.78);
  --tab-glow-b: rgba(34, 197, 94, 0.52);
  --tab-glow-c: rgba(21, 128, 61, 0.42);
  --btn-primary-bg: linear-gradient(165deg, #cbd5e1 0%, #64748b 100%);
  --btn-primary-shadow: 0 8px 14px rgba(100, 116, 139, 0.26), 0 2px 4px rgba(71, 85, 105, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --btn-primary-border: rgba(100, 116, 139, 0.42);
  --card-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.97) 100%);
  --card-elevated: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(241, 245, 249, 0.55) 40%, rgba(248, 250, 252, 0.94) 100%);
}