/* CSS Variables - 崩坏:星穹铁道 原生风格 (Authentic Style) */
:root {
    /* === 核心调色板 (Authentic Palette) === */
    --bg-primary: #000000;
    /* 纯黑背景 (配合星空) */
    --bg-overlay: rgba(0, 0, 0, 0.7);
    /* 遮罩层 */

    /* 文字颜色 */
    --color-text: #FFFFFF;
    /* 主文字 - 纯白 */
    --color-text-secondary: #CCCCCC;
    /* 次级文字 - 浅灰 */
    --color-text-dark: #333333;
    /* 深色文字 (用于亮色背景) */
    --color-text-gold: #DBC291;
    /* 金色文字 (强调) */

    /* 品牌色 */
    --color-gold: #DBC291;
    /* 星铁金 (5星/通用强调) */
    --color-purple: #9C6DE5;
    /* 4星紫 */
    --color-blue: #528DDB;
    /* 3星蓝 */

    /* 按钮与交互 */
    --btn-bg-normal: rgba(255, 255, 255, 0.1);
    --btn-bg-hover: rgba(255, 255, 255, 0.2);
    --btn-bg-active: rgba(255, 255, 255, 0.3);

    --btn-warp-10-bg: linear-gradient(to right, #E6D5B8, #DBC291);
    /* 10连按钮渐变 */
    --btn-warp-1-bg: #E5E5E5;
    /* 单抽按钮 */

    /* 字体系统 */
    --font-primary: 'Exo 2', system-ui, -apple-system, sans-serif;

    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 24px;
    --font-2xl: 32px;
    --font-3xl: 48px;

    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* 圆角 */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 12px;
    /* 较大的圆角用于卡片 */
    --radius-full: 9999px;

    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);

    /* Z-index */
    --z-background: -1;
    --z-content: 10;
    --z-ui: 100;
    --z-modal: 1000;
    --z-toast: 2000;

    /* 动画 */
    --transition-base: 0.2s ease-out;
}