/**
 * 音浪 (YinLang) 设计令牌系统
 * Design Tokens for consistent styling across all prototype pages
 * 与官网 (yinlan/index.html) 保持一致
 */

:root {
  /* ========================================
   * 颜色系统 (Color System)
   * ======================================== */
  
  /* 主色调 - 黑白灰 (与官网一致) */
  --color-black: #000000;
  --color-white: #FAFAFA;
  --color-bg: #000000;
  
  /* 灰度色阶 (与官网一致) */
  --color-gray-50: #F5F5F5;
  --color-gray-100: #E8E8E8;
  --color-gray-200: #D1D1D1;
  --color-gray-300: #B0B0B0;
  --color-gray-400: #9e9e9e;
  --color-gray-500: #757575;
  --color-gray-600: #616161;
  --color-gray-700: #454545;
  --color-gray-800: #1a1a1a;
  --color-gray-900: #0d0d0d;
  
  /* ========================================
   * 主题强调色系统 (Theme Accent Colors)
   * 8种预设主题 - 与官网完全一致
   * ======================================== */
  
  /* 默认主题色 */
  --color-accent: #FAFAFA;
  --color-accent-rgb: 250, 250, 250;
  --color-accent-secondary: #888888;
  --color-accent-secondary-rgb: 136, 136, 136;
  
  /* 渐变效果 (与官网一致) */
  --gradient-aurora: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 50%, #f093fb 100%);
  --gradient-neon: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary), var(--color-accent));
  
  /* 语义色 - 仅用于状态指示 */
  --color-success: #4CAF50;
  --color-error: #F44336;
  --color-warning: #FF9800;
  --color-info: #2196F3;
  
  /* 透明度变体 */
  --alpha-overlay: rgba(0, 0, 0, 0.6);
  --alpha-glass: rgba(255, 255, 255, 0.1);
  --alpha-blur: rgba(10, 10, 10, 0.8);
  --alpha-hover: rgba(255, 255, 255, 0.05);
  --alpha-active: rgba(255, 255, 255, 0.1);
  
  /* ========================================
   * 间距系统 (Spacing System)
   * ======================================== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  
  /* ========================================
   * 字体系统 (Typography System)
   * ======================================== */
  --font-family: "SF Pro Display", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  
  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --font-size-display: 48px;
  --font-size-hero: 64px;
  
  /* 字重 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ========================================
   * 圆角系统 (Border Radius System)
   * ======================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-xxl: 48px;
  --radius-full: 9999px;
  
  /* ========================================
   * 阴影系统 (Shadow System)
   * ======================================== */
  
  /* 曲线凹槽阴影 - 核心设计元素 */
  --shadow-groove: 
    inset 0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 -2px 4px rgba(255, 255, 255, 0.1);
  --shadow-groove-deep: 
    inset 0 6px 12px rgba(0, 0, 0, 0.5),
    inset 0 -3px 6px rgba(255, 255, 255, 0.08);
  
  /* 悬浮阴影 */
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-elevated-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
  
  /* 发光效果 */
  --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.2);
  --shadow-glow-sm: 0 0 10px rgba(255, 255, 255, 0.15);
  --shadow-glow-lg: 0 0 40px rgba(255, 255, 255, 0.25);
  
  /* 按钮按下效果 */
  --shadow-pressed: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  
  /* ========================================
   * 过渡动画系统 (Transition System)
   * ======================================== */
  --transition-instant: 100ms ease-out;
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 500ms ease-out;
  --transition-slower: 800ms ease-out;
  
  /* 弹性缓动 */
  --transition-elastic: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* 缓动函数 */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* ========================================
   * 模糊效果 (Blur Effects)
   * ======================================== */
  --blur-xs: 2px;
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-xxl: 40px;
  
  /* ========================================
   * 层级系统 (Z-Index System)
   * ======================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-floating: 350;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  
  /* ========================================
   * 布局尺寸 (Layout Dimensions)
   * ======================================== */
  --nav-height: 60px;
  --floating-player-height: 72px;
  --header-height: 56px;
  --side-panel-width: 33.333%;
  --max-content-width: 1200px;
  
  /* 移动端安全区域 */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  
  /* ========================================
   * 断点 (Breakpoints) - 用于媒体查询参考
   * ======================================== */
  /* 
   * --breakpoint-mobile: 0px - 767px
   * --breakpoint-tablet: 768px - 1023px
   * --breakpoint-desktop: 1024px+
   */
}

/* ========================================
 * 8种预设主题 (与官网完全一致)
 * ======================================== */

/* 1. 默认黑白 (Default Black & White) */
[data-theme="default"], [data-theme="dark"] {
  --bg-primary: #0A0A0A;
  --bg-secondary: #1A1A1A;
  --bg-tertiary: #2D2D2D;
  --text-primary: #FAFAFA;
  --text-secondary: #888888;
  --text-tertiary: #6D6D6D;
  --border-color: #2D2D2D;
  --color-accent: #FAFAFA;
  --color-accent-rgb: 250, 250, 250;
  --color-accent-secondary: #888888;
}

/* 2. 深海蓝 (Deep Ocean Blue) */
[data-theme="ocean"] {
  --bg-primary: #0D1B2A;
  --bg-secondary: #1B263B;
  --bg-tertiary: #2D3E50;
  --text-primary: #E0E1DD;
  --text-secondary: #778DA9;
  --text-tertiary: #5A7A9A;
  --border-color: #1B263B;
  --color-accent: #1B4965;
  --color-accent-rgb: 27, 73, 101;
  --color-accent-secondary: #778DA9;
}

/* 3. 暗夜紫 (Midnight Purple) */
[data-theme="purple"] {
  --bg-primary: #1A1423;
  --bg-secondary: #2D1F3D;
  --bg-tertiary: #3D2A50;
  --text-primary: #E8D5E0;
  --text-secondary: #9B7A8F;
  --text-tertiary: #7A5A6F;
  --border-color: #2D1F3D;
  --color-accent: #6B2D5C;
  --color-accent-rgb: 107, 45, 92;
  --color-accent-secondary: #9B7A8F;
}

/* 4. 森林绿 (Forest Green) */
[data-theme="forest"] {
  --bg-primary: #1A2F1A;
  --bg-secondary: #243524;
  --bg-tertiary: #2E4A2E;
  --text-primary: #D4E6D4;
  --text-secondary: #7A9F7A;
  --text-tertiary: #5A7F5A;
  --border-color: #243524;
  --color-accent: #2D5A27;
  --color-accent-rgb: 45, 90, 39;
  --color-accent-secondary: #7A9F7A;
}

/* 5. 暖橙调 (Warm Orange) */
[data-theme="orange"] {
  --bg-primary: #1F1410;
  --bg-secondary: #2D1F1A;
  --bg-tertiary: #3D2A20;
  --text-primary: #F5E6D3;
  --text-secondary: #C4A484;
  --text-tertiary: #A48464;
  --border-color: #2D1F1A;
  --color-accent: #8B4513;
  --color-accent-rgb: 139, 69, 19;
  --color-accent-secondary: #C4A484;
}

/* 6. 玫瑰金 (Rose Gold) */
[data-theme="rose"] {
  --bg-primary: #1A1517;
  --bg-secondary: #2D2328;
  --bg-tertiary: #3D3038;
  --text-primary: #F5E1E4;
  --text-secondary: #C9A0A8;
  --text-tertiary: #A98088;
  --border-color: #2D2328;
  --color-accent: #B76E79;
  --color-accent-rgb: 183, 110, 121;
  --color-accent-secondary: #C9A0A8;
}

/* 7. 极光蓝 (Aurora Blue) */
[data-theme="aurora"] {
  --bg-primary: #0F1419;
  --bg-secondary: #192734;
  --bg-tertiary: #22303C;
  --text-primary: #E7E9EA;
  --text-secondary: #71767B;
  --text-tertiary: #536471;
  --border-color: #192734;
  --color-accent: #1DA1F2;
  --color-accent-rgb: 29, 161, 242;
  --color-accent-secondary: #71767B;
}

/* 8. 薰衣草 (Lavender) */
[data-theme="lavender"] {
  --bg-primary: #1A1A2E;
  --bg-secondary: #2D2D4A;
  --bg-tertiary: #3D3D5C;
  --text-primary: #E8E0F0;
  --text-secondary: #A89BBF;
  --text-tertiary: #887B9F;
  --border-color: #2D2D4A;
  --color-accent: #9B59B6;
  --color-accent-rgb: 155, 89, 182;
  --color-accent-secondary: #A89BBF;
}

/* 浅色主题（备用） */
[data-theme="light"] {
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-gray-700);
  --text-tertiary: var(--color-gray-500);
  --border-color: var(--color-gray-200);
}


/* ========================================
 * 全局自定义光标系统 (Custom Cursor System)
 * 仅桌面端 (macOS/Windows) 使用，移动端使用默认光标
 * 与官网 (yinlan/index.html) 保持一致
 * ======================================== */

/* 桌面端隐藏系统光标 */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none !important;
  }

  *, *::before, *::after {
    cursor: none !important;
  }

  a, button, input, textarea, select, [role="button"], .clickable {
    cursor: none !important;
  }
}

/* 自定义光标元素 */
.cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease, border-color 0.2s ease, mix-blend-mode 0s;
  transform: translate(-50%, -50%);
}

.cursor-follower {
  width: 40px;
  height: 40px;
  background: rgba(var(--color-accent-rgb), 0.15);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.25s ease-out, width 0.3s ease, height 0.3s ease, background 0.3s ease, opacity 0.2s ease;
  transform: translate(-50%, -50%);
}

.cursor-glow {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 70%);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.4s ease-out, opacity 0.2s ease;
  transform: translate(-50%, -50%);
}

/* 光标悬停状态 - 圆圈内背景颜色反转 (使用 mix-blend-mode: difference) */
.cursor.hover {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border: none;
  mix-blend-mode: difference;
}

.cursor-follower.hover {
  opacity: 0;
}

.cursor-glow.hover {
  opacity: 0;
}

/* 光标点击状态 */
.cursor.click {
  transform: translate(-50%, -50%) scale(0.8);
}

/* 光标文本状态 */
.cursor.text {
  width: 4px;
  height: 30px;
  border-radius: 2px;
  background: var(--color-accent);
  border: none;
}

/* 光标隐藏状态 */
.cursor.hidden, .cursor-follower.hidden, .cursor-glow.hidden {
  opacity: 0;
}

/* 移动端/触摸设备恢复默认光标 */
@media (hover: none), (pointer: coarse) {
  body, *, *::before, *::after,
  a, button, input, textarea, select, [role="button"], .clickable {
    cursor: auto !important;
  }

  .cursor, .cursor-follower, .cursor-glow {
    display: none !important;
  }
}

/* ========================================
 * 核心动效关键帧 (Core Animation Keyframes)
 * 与官网保持一致
 * ======================================== */

/* 渐变色流动动效 */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 脉冲动效 */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* 淡入上浮动效 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 呼吸动效 - 用于云端同步等元素 */
@keyframes syncBreath {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.08);
  }
}

/* 滚动脉冲动效 */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; height: 60px; }
  50% { opacity: 1; height: 80px; }
}

/* 均衡器动效 */
@keyframes equalizerBounce {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}

/* 黑胶唱片旋转 */
@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 唱臂摆动 */
@keyframes armSwing {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-25deg); }
}

/* 网格移动动效 */
@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
}

/* 球体浮动动效 */
@keyframes orbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* 球体旋转动效 */
@keyframes orbRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 标题揭示动效 */
@keyframes titleReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* ========================================
 * 通用动效类 (Utility Animation Classes)
 * ======================================== */

/* 渐变文字效果 */
.gradient-text {
  background: var(--gradient-aurora);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}

/* 渐变背景动效 */
.gradient-bg-animated {
  background: var(--gradient-aurora);
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

/* 呼吸动效类 */
.breathing {
  animation: syncBreath 3s ease-in-out infinite;
}

/* 脉冲动效类 */
.pulsing {
  animation: pulse 2s ease-in-out infinite;
}

/* 淡入动效类 */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

/* 延迟动效 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* ========================================
 * 交互悬停效果 (Interactive Hover Effects)
 * ======================================== */

/* 卡片悬停效果 */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-elevated-lg);
}

/* 缩放悬停效果 */
.hover-scale {
  transition: transform var(--transition-normal);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* 发光悬停效果 */
.hover-glow {
  transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.4);
}

/* 边框高亮悬停效果 */
.hover-border {
  transition: border-color var(--transition-normal);
  border: 1px solid transparent;
}

.hover-border:hover {
  border-color: rgba(var(--color-accent-rgb), 0.5);
}


/* ========================================
 * 全局禁用复制 (Disable Copy Globally)
 * 评论区和可编辑文本除外
 * ======================================== */

/* 全局禁用文本选择和复制 */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 允许评论区文本选择 */
.comment-text,
.comment-content,
.comments-section,
[data-selectable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 允许可编辑元素选择 */
input,
textarea,
[contenteditable="true"],
.editable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 禁用右键菜单（可选，通过JS实现更灵活） */
/* 注意：此CSS规则仅作为标记，实际禁用需要JS */

/* ========================================
 * 表单元素深色主题适配 (Form Elements Dark Theme)
 * 修复 select 下拉列表在深色主题下的显示问题
 * ======================================== */

/* 设置 select 元素使用深色配色方案 */
select,
.form-select {
  color-scheme: dark;
  background-color: var(--bg-secondary, #1a1a1a);
  color: var(--text-primary, #ffffff);
}

/* 为 option 元素设置深色背景和浅色文字 */
select option,
.form-select option {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* 选中状态的 option */
select option:checked,
.form-select option:checked {
  background-color: #333333;
  color: #ffffff;
}

/* 悬停状态的 option (部分浏览器支持) */
select option:hover,
.form-select option:hover {
  background-color: #2a2a2a;
}