/* ==================== CSS 自定义属性（设计令牌） ==================== */
:root {
    /* 金色系 */
    --color-gold: #b3863b;
    --color-gold-light: #d9aa5a;
    --color-gold-bright: #e3a94a;
    --color-gold-highlight: #ffcc00;

    /* 品质色 */
    --color-quality-gold: #cca43b;
    --color-quality-purple: #9c27b0;
    --color-quality-purple-light: #bf5af2;
    --color-quality-blue: #2196f3;
    --color-quality-blue-light: #29b6f6;
    --color-quality-white: #ffffff;

    /* 背景色 */
    --color-bg-deep: #000000;
    --color-bg-dark: #0a0a0a;
    --color-bg-mid: #111;
    --color-bg-mid-alt: #151515;
    --color-bg-input: #1a1a1a;
    --color-bg-input-alt: #222;
    --color-bg-overlay: rgba(0, 0, 0, 0.85);
    --color-bg-overlay-light: rgba(10, 10, 10, 0.85);
    --color-bg-overlay-mid: rgba(0, 0, 0, 0.7);
    --color-bg-card: rgba(15, 15, 15, 0.95);

    /* 文字色 */
    --color-text-primary: #ffffff;
    --color-text-primary-alt: #fff;
    --color-text-secondary: #ddd;
    --color-text-muted: #aaa;
    --color-text-dim: #888;
    --color-text-dimmer: #666;
    --color-text-dimmest: #555;
    --color-text-ccc: #ccc;

    /* 功能色 */
    --color-danger: #ff5555;
    --color-danger-soft: #ff9999;
    --color-danger-bg: rgba(255, 85, 85, 0.2);
    --color-danger-dark: #661111;
    --color-danger-dark-hover: #992222;
    --color-success: #88ff88;
    --color-success-bg: rgba(136, 255, 136, 0.1);
    --color-success-green: #4caf50;
    --color-player-accent: #ffaa00;

    /* 字体 */
    --font-main: "Microsoft YaHei", sans-serif;

    /* 圆角 */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-round: 50%;

    /* 间距 */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    /* 阴影 */
    --shadow-nav: 0 4px 15px rgba(0, 0, 0, 0.5);
    --shadow-container: 0 10px 30px rgba(0, 0, 0, 0.8);
    --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.8);
    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.6);
    --shadow-canvas: 0 0 20px rgba(0, 0, 0, 0.8);

    /* 边框色 (基于金色的透明度变体) */
    --border-gold: rgba(179, 134, 59, 0.3);
    --border-gold-light: rgba(179, 134, 59, 0.2);
    --border-gold-subtle: rgba(179, 134, 59, 0.15);
    --border-gold-dim: rgba(179, 134, 59, 0.25);
    --border-white-subtle: rgba(255, 255, 255, 0.05);
    --border-white-dim: rgba(255, 255, 255, 0.08);

    /* 辉光 */
    --glow-gold: 0 0 10px var(--color-gold);
    --glow-gold-strong: 0 0 25px rgba(179, 134, 59, 0.8);
    --glow-quality-gold: 0 0 15px rgba(204, 164, 59, 0.45);
    --glow-quality-purple: 0 0 15px rgba(156, 39, 176, 0.45);
    --glow-quality-blue: 0 0 15px rgba(33, 150, 243, 0.45);
    --glow-quality-white: 0 0 8px rgba(255, 255, 255, 0.15);

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-smooth: 0.3s ease;
}