/* ===== 音乐主题变量 ===== */

:root {
  /* 主色调 */
  --tf-primary: #4A90E2;
  --tf-primary-dark: #357ABD;
  --tf-primary-light: #7AB3F5;
  --tf-secondary: #FF6B6B;
  --tf-secondary-dark: #E55555;

  /* 背景色 */
  --tf-bg: #FFFFFF;
  --tf-bg-secondary: #F7F9FC;
  --tf-bg-tertiary: #EDF2F7;
  --tf-bg-card: #FFFFFF;

  /* 文字色 */
  --tf-text: #1A1A1A;
  --tf-text-secondary: #666666;
  --tf-text-tertiary: #999999;
  --tf-text-inverse: #FFFFFF;

  /* 边框与分割线 */
  --tf-border: #E5E7EB;
  --tf-border-light: #F0F2F5;

  /* 阴影 */
  --tf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --tf-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --tf-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* 圆角 */
  --tf-radius-sm: 8px;
  --tf-radius: 12px;
  --tf-radius-lg: 16px;
  --tf-radius-xl: 24px;

  /* 尺寸 */
  --tf-header-height: 72px;
  --tf-container-max: 1200px;

  /* 过渡 */
  --tf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 断点 */
  --tf-breakpoint-sm: 640px;
  --tf-breakpoint-md: 768px;
  --tf-breakpoint-lg: 1024px;
  --tf-breakpoint-xl: 1280px;
}

/* 暗色模式 */
[data-theme="dark"] {
  --tf-bg: #0F1419;
  --tf-bg-secondary: #1A2332;
  --tf-bg-tertiary: #243044;
  --tf-bg-card: #1A2332;

  --tf-text: #FFFFFF;
  --tf-text-secondary: #B0B8C4;
  --tf-text-tertiary: #7A8496;

  --tf-border: #2C3548;
  --tf-border-light: #243044;

  --tf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --tf-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --tf-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}