/* ==========================================================================
 * 主题 Token 层 (Theme Tokens)
 * 支持多主题动态切换：蓝色商务（默认）、清爽性冷淡风、尊享奢华金、莫兰迪青、科技极客紫、深色夜间
 * ========================================================================== */

/* --- 1. 蓝色商务 (Blue Business / Default) --- */
:root,
:root[data-theme="blue"],
[data-theme="blue"],
[data-theme="theme-blue"],
.theme-blue {
  --color-primary: #2E6BE6;
  --color-primary-dark: #1E40AF;
  --color-primary-light: #EBF1FC;
  --bg-page: #F5F7FA;
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-gradient-start: #2E6BE6;
  --bg-gradient-end: #5B83D6;
  --gradient-hero: linear-gradient(160deg, #0F172A 0%, #1E3A8A 45%, #0F172A 100%);
  --text-primary: #1A1A1A;
  --text-secondary: #8C8C8C;
  --text-placeholder: #BFBFBF;
  --border-default: #E8E8E8;
  --shadow-glow: rgba(46, 107, 230, 0.25);
  --ambient-glow-color: rgba(37, 99, 235, 0.35);
  --badge-bg: #EBF1FC;
  --badge-color: #2E6BE6;
}

/* --- 2. 清爽性冷淡风 (Minimalist Cool / Slate & Ice) --- */
:root[data-theme="minimal"],
[data-theme="minimal"],
[data-theme="theme-minimal"],
.theme-minimal {
  --color-primary: #475569;
  --color-primary-dark: #1E293B;
  --color-primary-light: #F1F5F9;
  --bg-page: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.9);
  --bg-gradient-start: #475569;
  --bg-gradient-end: #94A3B8;
  --gradient-hero: linear-gradient(160deg, #1E293B 0%, #334155 45%, #0F172A 100%);
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-placeholder: #94A3B8;
  --border-default: #E2E8F0;
  --shadow-glow: rgba(71, 85, 105, 0.15);
  --ambient-glow-color: rgba(148, 163, 184, 0.3);
  --badge-bg: #F1F5F9;
  --badge-color: #475569;
}

/* --- 3. 尊享奢华金 (Business Gold / Luxury Gold) --- */
:root[data-theme="gold"],
[data-theme="gold"],
[data-theme="theme-gold"],
.theme-gold {
  --color-primary: #D97706;
  --color-primary-dark: #B45309;
  --color-primary-light: #FEF3C7;
  --bg-page: #FAF8F5;
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-gradient-start: #D97706;
  --bg-gradient-end: #F59E0B;
  --gradient-hero: linear-gradient(160deg, #1C1917 0%, #451A03 45%, #1C1917 100%);
  --text-primary: #1C1917;
  --text-secondary: #78716C;
  --text-placeholder: #A8A29E;
  --border-default: #E7E5E4;
  --shadow-glow: rgba(217, 119, 6, 0.25);
  --ambient-glow-color: rgba(245, 158, 11, 0.4);
  --badge-bg: #FEF3C7;
  --badge-color: #D97706;
}

/* --- 4. 莫兰迪青 (Morandi Teal / Mint Fresh) --- */
:root[data-theme="teal"],
[data-theme="teal"],
[data-theme="theme-teal"],
.theme-teal {
  --color-primary: #0D7377;
  --color-primary-dark: #095457;
  --color-primary-light: #E6F4F4;
  --bg-page: #F4F8F8;
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-gradient-start: #0D7377;
  --bg-gradient-end: #14A3A8;
  --gradient-hero: linear-gradient(160deg, #022C22 0%, #064E3B 45%, #022C22 100%);
  --text-primary: #132E2F;
  --text-secondary: #5A7B7C;
  --text-placeholder: #9BB3B4;
  --border-default: #E0ECEC;
  --shadow-glow: rgba(13, 115, 119, 0.22);
  --ambient-glow-color: rgba(20, 163, 168, 0.4);
  --badge-bg: #E6F4F4;
  --badge-color: #0D7377;
}

/* --- 5. 科技极客紫 (Tech Purple) --- */
:root[data-theme="purple"],
[data-theme="purple"],
[data-theme="theme-purple"],
.theme-purple {
  --color-primary: #8B5CF6;
  --color-primary-dark: #6D28D9;
  --color-primary-light: #F3E8FF;
  --bg-page: #F8F6FC;
  --bg-card: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-gradient-start: #8B5CF6;
  --bg-gradient-end: #A78BFA;
  --gradient-hero: linear-gradient(160deg, #0F172A 0%, #3B0764 45%, #0F172A 100%);
  --text-primary: #1E1B4B;
  --text-secondary: #6B7280;
  --text-placeholder: #9CA3AF;
  --border-default: #EDE9FE;
  --shadow-glow: rgba(139, 92, 246, 0.25);
  --ambient-glow-color: rgba(168, 85, 247, 0.4);
  --badge-bg: #F3E8FF;
  --badge-color: #8B5CF6;
}

/* --- 6. 深色夜间 (Dark Mode / Deep Slate) --- */
:root[data-theme="dark"],
[data-theme="dark"],
[data-theme="theme-dark"],
.theme-dark {
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-primary-light: rgba(59, 130, 246, 0.18);
  --bg-page: #0B0F19;
  --bg-card: #151D2A;
  --bg-glass: rgba(21, 29, 42, 0.85);
  --bg-gradient-start: #1E293B;
  --bg-gradient-end: #0F172A;
  --gradient-hero: linear-gradient(160deg, #030712 0%, #111827 45%, #030712 100%);
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-placeholder: #64748B;
  --border-default: #1E293B;
  --shadow-glow: rgba(59, 130, 246, 0.2);
  --ambient-glow-color: rgba(156, 163, 175, 0.2);
  --badge-bg: rgba(59, 130, 246, 0.2);
  --badge-color: #60A5FA;
}

/* --- 7. 纯净黑白灰 (Pure Monochrome / Minimalist Black-White-Gray) --- */
:root[data-theme="mono"],
[data-theme="mono"],
[data-theme="theme-mono"],
.theme-mono {
  --color-primary: #18181B;
  --color-primary-dark: #000000;
  --color-primary-light: #F4F4F5;
  --bg-page: #FFFFFF;
  --bg-card: #FAFAFA;
  --bg-glass: rgba(255, 255, 255, 0.95);
  --bg-gradient-start: #27272A;
  --bg-gradient-end: #52525B;
  --gradient-hero: linear-gradient(160deg, #18181B 0%, #27272A 50%, #09090B 100%);
  --text-primary: #09090B;
  --text-secondary: #71717A;
  --text-placeholder: #A1A1AA;
  --border-default: #E4E4E7;
  --shadow-glow: rgba(24, 24, 27, 0.12);
  --ambient-glow-color: rgba(161, 161, 170, 0.15);
  --badge-bg: #18181B;
  --badge-color: #FFFFFF;
}

/* 全局主题样式重写规范：所有原型页面统一关联最上方功能区 */
.theme-floating-bar,
.theme-bar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-floating-dot,
.theme-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.theme-floating-dot:hover,
.theme-dot:hover {
  transform: scale(1.25);
}

.theme-floating-dot.active,
.theme-dot.active {
  border-color: #FFFFFF;
  box-shadow: 0 0 8px currentColor;
  transform: scale(1.18);
}