/**
 * 全局共享样式变量
 * 所有页面共享的主题色、布局等CSS变量
 */

/* ===== 主题色变量 ===== */
:root {
    /* 浅色模式（默认） */
    --bg-primary: #F3F4F6;
    --bg-card: #FFFFFF;
    --text-primary: #1F2937;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;
    --border-color: #E5E7EB;
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-warning: #F59E0B;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ===== 深色模式变量 ===== */
body.dark-mode {
    --bg-primary: #111827;
    --bg-card: #1F2937;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --border-color: #374151;
    --color-primary: #60A5FA;
    --color-primary-hover: #3B82F6;
    --color-success: #34D399;
    --color-success-hover: #10B981;
    --color-danger: #F87171;
    --color-danger-hover: #EF4444;
    --color-warning: #FBBF24;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ===== 基础样式 ===== */
* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 通用深色模式覆盖 */
body .bg-white { background: var(--bg-card) !important; }
body .text-gray-800 { color: var(--text-primary) !important; }
body .text-gray-600 { color: var(--text-secondary) !important; }
body .text-gray-500 { color: var(--text-muted) !important; }
body .text-gray-400 { color: var(--text-muted) !important; }
body .border-gray-200 { border-color: var(--border-color) !important; }
body .border-gray-300 { border-color: var(--border-color) !important; }
body .border-gray-100 { border-color: var(--border-color) !important; }
body .bg-gray-50 { background: var(--bg-card) !important; }
body .bg-gray-100 { background: var(--bg-card) !important; }
body .hover\:bg-gray-50:hover { background: var(--bg-card) !important; }
body .bg-gray-200 { background: var(--border-color) !important; color: var(--text-primary) !important; }
body .hover\:bg-gray-300:hover { background: var(--border-color) !important; }

/* 通用过渡效果 */
* { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
button, a { transition: all 0.2s ease; }

/* ===== 简谱显示区样式 ===== */
.jianpu-display {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
.jianpu-display .jianpu-empty { color: var(--text-muted) !important; }

/* ===== 播放进度条 ===== */
input[type="range"] {
    -webkit-appearance: none;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* ===== 输入框样式 ===== */
input[type="text"],
input[type="number"],
input[type="password"] {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ===== 卡片样式 ===== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}