/**
 * WEB 前台配色主题（由后台「WEB 端管理 → 主题配置」选择）
 * 默认主题（default）不设置 data-web-preset，沿用 layout 内置 :root 变量
 */

/* ---- 浅色：品牌色与页面底色 ---- */
html[data-web-preset="emerald"] {
  --web-bg: #f3fbf7;
  --web-brand: #059669;
  --web-brand-2: #047857;
  --web-ui-accent: var(--web-brand);
  --web-modal-accent: rgba(5, 150, 105, 0.12);
  --web-scroll-thumb: rgba(5, 150, 105, 0.34);
  --web-scroll-thumb-hover: rgba(5, 150, 105, 0.5);
  --web-scroll-thumb-active: rgba(5, 150, 105, 0.72);
}
html[data-web-preset="violet"] {
  --web-bg: #f7f5ff;
  --web-brand: #7c3aed;
  --web-brand-2: #6d28d9;
  --web-ui-accent: var(--web-brand);
  --web-modal-accent: rgba(124, 58, 237, 0.12);
  --web-scroll-thumb: rgba(124, 58, 237, 0.34);
  --web-scroll-thumb-hover: rgba(124, 58, 237, 0.5);
  --web-scroll-thumb-active: rgba(124, 58, 237, 0.72);
}
html[data-web-preset="amber"] {
  --web-bg: #fffbf3;
  --web-brand: #d97706;
  --web-brand-2: #b45309;
  --web-ui-accent: var(--web-brand);
  --web-modal-accent: rgba(217, 119, 6, 0.12);
  --web-scroll-thumb: rgba(217, 119, 6, 0.34);
  --web-scroll-thumb-hover: rgba(217, 119, 6, 0.5);
  --web-scroll-thumb-active: rgba(217, 119, 6, 0.72);
}
html[data-web-preset="rose"] {
  --web-bg: #fff5f7;
  --web-brand: #e11d48;
  --web-brand-2: #be123c;
  --web-ui-accent: var(--web-brand);
  --web-modal-accent: rgba(225, 29, 72, 0.12);
  --web-scroll-thumb: rgba(225, 29, 72, 0.34);
  --web-scroll-thumb-hover: rgba(225, 29, 72, 0.5);
  --web-scroll-thumb-active: rgba(225, 29, 72, 0.72);
}
html[data-web-preset="slate"] {
  --web-bg: #f8fafc;
  --web-brand: #334155;
  --web-brand-2: #1e293b;
  --web-ui-accent: var(--web-brand);
  --web-modal-accent: rgba(51, 65, 85, 0.12);
  --web-scroll-thumb: rgba(51, 65, 85, 0.34);
  --web-scroll-thumb-hover: rgba(51, 65, 85, 0.5);
  --web-scroll-thumb-active: rgba(51, 65, 85, 0.72);
}
html[data-web-preset="ocean"] {
  --web-bg: #f0fdfa;
  --web-brand: #0891b2;
  --web-brand-2: #0e7490;
  --web-ui-accent: var(--web-brand);
  --web-modal-accent: rgba(8, 145, 178, 0.12);
  --web-scroll-thumb: rgba(8, 145, 178, 0.34);
  --web-scroll-thumb-hover: rgba(8, 145, 178, 0.5);
  --web-scroll-thumb-active: rgba(8, 145, 178, 0.72);
}

/* ---- 深色：品牌色 + 背景氛围 ---- */
html.web-theme-dark[data-web-preset="emerald"] {
  --web-brand: #34d399;
  --web-brand-2: #10b981;
  --web-ui-accent: var(--web-brand);
  --web-scroll-thumb: rgba(52, 211, 153, 0.36);
  --web-scroll-thumb-hover: rgba(52, 211, 153, 0.52);
  --web-scroll-thumb-active: rgba(52, 211, 153, 0.74);
}
html.web-theme-dark[data-web-preset="emerald"] body {
  background: radial-gradient(1000px 520px at 8% -8%, rgba(16, 185, 129, 0.16), transparent 55%),
    radial-gradient(780px 420px at 100% 0%, rgba(52, 211, 153, 0.12), transparent 48%),
    var(--web-bg);
  background-color: var(--web-bg);
}

html.web-theme-dark[data-web-preset="violet"] {
  --web-brand: #a78bfa;
  --web-brand-2: #8b5cf6;
  --web-ui-accent: var(--web-brand);
  --web-scroll-thumb: rgba(167, 139, 250, 0.36);
  --web-scroll-thumb-hover: rgba(167, 139, 250, 0.52);
  --web-scroll-thumb-active: rgba(167, 139, 250, 0.74);
}
html.web-theme-dark[data-web-preset="violet"] body {
  background: radial-gradient(1000px 520px at 8% -8%, rgba(139, 92, 246, 0.18), transparent 55%),
    radial-gradient(780px 420px at 100% 0%, rgba(167, 139, 250, 0.12), transparent 48%),
    var(--web-bg);
  background-color: var(--web-bg);
}

html.web-theme-dark[data-web-preset="amber"] {
  --web-brand: #fbbf24;
  --web-brand-2: #f59e0b;
  --web-ui-accent: var(--web-brand);
  --web-scroll-thumb: rgba(251, 191, 36, 0.36);
  --web-scroll-thumb-hover: rgba(251, 191, 36, 0.52);
  --web-scroll-thumb-active: rgba(251, 191, 36, 0.74);
}
html.web-theme-dark[data-web-preset="amber"] body {
  background: radial-gradient(1000px 520px at 8% -8%, rgba(245, 158, 11, 0.16), transparent 55%),
    radial-gradient(780px 420px at 100% 0%, rgba(251, 191, 36, 0.10), transparent 48%),
    var(--web-bg);
  background-color: var(--web-bg);
}

html.web-theme-dark[data-web-preset="rose"] {
  --web-brand: #fb7185;
  --web-brand-2: #f43f5e;
  --web-ui-accent: var(--web-brand);
  --web-scroll-thumb: rgba(251, 113, 133, 0.36);
  --web-scroll-thumb-hover: rgba(251, 113, 133, 0.52);
  --web-scroll-thumb-active: rgba(251, 113, 133, 0.74);
}
html.web-theme-dark[data-web-preset="rose"] body {
  background: radial-gradient(1000px 520px at 8% -8%, rgba(244, 63, 94, 0.16), transparent 55%),
    radial-gradient(780px 420px at 100% 0%, rgba(251, 113, 133, 0.12), transparent 48%),
    var(--web-bg);
  background-color: var(--web-bg);
}

html.web-theme-dark[data-web-preset="slate"] {
  --web-brand: #94a3b8;
  --web-brand-2: #64748b;
  --web-ui-accent: var(--web-brand);
  --web-scroll-thumb: rgba(148, 163, 184, 0.36);
  --web-scroll-thumb-hover: rgba(148, 163, 184, 0.52);
  --web-scroll-thumb-active: rgba(148, 163, 184, 0.74);
}
html.web-theme-dark[data-web-preset="slate"] body {
  background: radial-gradient(1000px 520px at 8% -8%, rgba(100, 116, 139, 0.14), transparent 55%),
    radial-gradient(780px 420px at 100% 0%, rgba(148, 163, 184, 0.10), transparent 48%),
    var(--web-bg);
  background-color: var(--web-bg);
}

html.web-theme-dark[data-web-preset="ocean"] {
  --web-brand: #22d3ee;
  --web-brand-2: #06b6d4;
  --web-ui-accent: var(--web-brand);
  --web-scroll-thumb: rgba(34, 211, 238, 0.36);
  --web-scroll-thumb-hover: rgba(34, 211, 238, 0.52);
  --web-scroll-thumb-active: rgba(34, 211, 238, 0.74);
}
html.web-theme-dark[data-web-preset="ocean"] body {
  background: radial-gradient(1000px 520px at 8% -8%, rgba(6, 182, 212, 0.16), transparent 55%),
    radial-gradient(780px 420px at 100% 0%, rgba(34, 211, 238, 0.12), transparent 48%),
    var(--web-bg);
  background-color: var(--web-bg);
}

/*
 * 滚动条颜色随 --web-ui-accent 动态混合（各页面可覆盖该变量以匹配自身 UI）
 */
@supports (color: color-mix(in srgb, white, black)) {
  html {
    --web-scroll-thumb: color-mix(in srgb, var(--web-ui-accent) 36%, transparent);
    --web-scroll-thumb-hover: color-mix(in srgb, var(--web-ui-accent) 54%, transparent);
    --web-scroll-thumb-active: color-mix(in srgb, var(--web-ui-accent) 76%, transparent);
  }
  html.web-theme-dark {
    --web-scroll-thumb: color-mix(in srgb, var(--web-ui-accent) 34%, transparent);
    --web-scroll-thumb-hover: color-mix(in srgb, var(--web-ui-accent) 52%, transparent);
    --web-scroll-thumb-active: color-mix(in srgb, var(--web-ui-accent) 74%, transparent);
  }
}