/**
 * CSS 变量系统 - 主题颜色和通用变量
 * 设计风格：Apple iOS 18 & macOS Sonoma Human Interface Guidelines
 * 特点：更精致的颜色层级、更高的对比度、更现代的调性
 * 支持亮色/暗色主题无缝切换
 */

:root {
    /* ========================================
       亮色主题 (Light Mode)
       灵感来自 iOS 系统界面、Apple Weather、Apple Maps
       特点：清爽、高级感、强烈的视觉层级
       ======================================== */
    
    /* === 背景色系统 === */
    --bg-primary: #FFFFFF;              /* 纯白主背景 */
    --bg-secondary: #F9F9FC;            /* 浅灰背景 - 微妙的蓝紫色调 */
    --bg-tertiary: #EFF1F8;             /* 中灰背景 - 更强的蓝紫色调 */
    --bg-elevated: #FFFFFF;             /* 悬浮/卡片背景 - 纯白 */
    --bg-container: #F9F9FC;            /* 容器背景 */
    --bg-hover: #F5F5F7;                /* 悬停背景 */
    
    /* === 文字色系统 === */
    --text-primary: #1A1A1A;            /* 主要文字 - 深黑色 */
    --text-secondary: #666666;          /* 次要文字 - 深灰色 */
    --text-tertiary: #999999;           /* 辅助文字 - 中灰色 */
    --text-quaternary: #CCCCCC;         /* 占位符/禁用文字 - 浅灰色 */
    --text-inverse: #FFFFFF;            /* 反色文字 - 用于深色背景 */
    
    /* === 强调色系统 (Accent Colors) === */
    /* 主要蓝色 - 现代科技感 */
    --accent-blue: #0071E3;             /* 主操作色 - Apple蓝 */
    --accent-blue-hover: #0056B3;       /* 悬停状态 */
    --accent-blue-active: #003A99;      /* 激活/按下状态 */
    --accent-blue-light: #E3F2FF;       /* 浅色背景 */
    --accent-blue-tint: rgba(0, 113, 227, 0.08);  /* 浅色提示 */
    
    /* 成功/确认色 - 新鲜绿 */
    --accent-green: #34C759;            /* 成功状态 - Apple绿 */
    --accent-green-hover: #2BA844;      /* 悬停状态 */
    --accent-green-active: #228F3C;     /* 激活状态 */
    --accent-green-light: #E8F5E9;      /* 浅色背景 */
    --accent-green-tint: rgba(52, 199, 89, 0.08);
    
    /* 危险/警告色 - 现代红 */
    --accent-red: #FF3B30;              /* 危险操作 - Apple红 */
    --accent-red-hover: #E63028;        /* 悬停状态 */
    --accent-red-active: #CC2820;       /* 激活状态 */
    --accent-red-light: #FFEBEE;        /* 浅色背景 */
    --accent-red-tint: rgba(255, 59, 48, 0.08);
    
    /* 警告/提示色 - 现代橙 */
    --accent-orange: #FF9500;           /* 警告提示 - Apple橙 */
    --accent-orange-hover: #E68400;     /* 悬停状态 */
    --accent-orange-active: #CC7700;    /* 激活状态 */
    --accent-orange-light: #FFF3E0;     /* 浅色背景 */
    --accent-orange-tint: rgba(255, 149, 0, 0.08);
    
    /* 特殊/强调色 */
    --accent-purple: #BF5AF2;           /* 特殊标记 - Apple紫 */
    --accent-purple-hover: #A844D6;     /* 悬停状态 */
    --accent-purple-light: #F3E5FF;     /* 浅色背景 */
    --accent-purple-tint: rgba(191, 90, 242, 0.08);
    
    --accent-yellow: #FFD60A;           /* 高亮/提示 */
    --accent-yellow-light: #FFFDE7;     /* 浅色背景 */
    --accent-yellow-tint: rgba(255, 214, 10, 0.08);
    
    /* 中立色 - 用于次要操作 */
    --accent-gray: #A1A1A6;             /* 灰色 - Apple灰 */
    --accent-gray-hover: #8E8E93;
    --accent-gray-light: #F5F5F7;
    
    /* === 语义化颜色 === */
    --color-success: #34C759;
    --color-success-bg: #E8F5E9;
    --color-success-border: rgba(52, 199, 89, 0.2);
    
    --color-warning: #FF9500;
    --color-warning-bg: #FFF3E0;
    --color-warning-border: rgba(255, 149, 0, 0.2);
    
    --color-error: #FF3B30;
    --color-error-bg: #FFEBEE;
    --color-error-border: rgba(255, 59, 48, 0.2);
    
    --color-info: #0071E3;
    --color-info-bg: #E3F2FF;
    --color-info-border: rgba(0, 113, 227, 0.2);
    
    /* === 边框色系统 === */
    --border-light: #E5E5EA;            /* 浅色边框 */
    --border-medium: #D5D5DC;           /* 中等边框 */
    --border-heavy: #BFBFBF;            /* 深色边框 */
    --border-opaque: rgba(0, 0, 0, 0.06);  /* 半透明边框 */
    
    /* === 交互状态 === */
    --hover-bg: rgba(0, 0, 0, 0.04);    /* 悬停背景 */
    --active-bg: rgba(0, 0, 0, 0.08);   /* 激活背景 */
    --selected-bg: rgba(0, 113, 227, 0.1);  /* 选中背景 */
    --focus-ring: rgba(0, 113, 227, 0.3);   /* 焦点环 */
    
    /* === 叠加层 === */
    --overlay-light: rgba(0, 0, 0, 0.25);
    --overlay-medium: rgba(0, 0, 0, 0.4);
    --overlay-heavy: rgba(0, 0, 0, 0.6);
    
    /* ========================================
       通用变量 (Theme-Independent)
       ======================================== */
    
    /* === 圆角系统 === */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* === 阴影系统 === */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    
    /* === 过渡动画 === */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* === 间距系统 (基于 4px 网格) === */
    --spacing-0: 0;
    --spacing-1: 0.25rem;       /* 4px */
    --spacing-2: 0.5rem;        /* 8px */
    --spacing-3: 0.75rem;       /* 12px */
    --spacing-4: 1rem;          /* 16px */
    --spacing-5: 1.25rem;       /* 20px */
    --spacing-6: 1.5rem;        /* 24px */
    --spacing-8: 2rem;          /* 32px */
    --spacing-10: 2.5rem;       /* 40px */
    --spacing-12: 3rem;         /* 48px */
    --spacing-16: 4rem;         /* 64px */
    --spacing-20: 5rem;         /* 80px */
    
    /* 别名 */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);
    
    /* === 字体系统 === */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    
    --font-weight-normal: 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;
    
    /* === 导航栏 === */
    --navbar-height: 60px;
    --navbar-bg: rgba(255, 255, 255, 0.7);
    --navbar-border: rgba(0, 0, 0, 0.06);
    --navbar-blur: blur(25px);
    
    /* === Z-index 层级 === */
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-navbar: 1020;
    --z-modal: 1030;
    --z-popover: 1040;
    --z-tooltip: 1050;
    
    /* === 编辑器特定变量 === */
    --preview-bg: #000000;              /* 预览区黑色背景 */
    --preview-label-color: #A69F91;     /* 物品标签默认颜色 */
    --scrollbar-thumb: #d1d1d6;         /* 滚动条拇指 */
    --scrollbar-thumb-hover: #a1a1a6;   /* 滚动条拇指悬停 */
}

/* ========================================
   暗色主题 (Dark Mode)
   灵感来自 iOS 18 Dark、macOS Sonoma Dark
   特点：深沉优雅、减少眼睛疲劳、强调内容
   ======================================== */

[data-theme="dark"] {
    /* === 背景色系统 === */
    --bg-primary: #0A0A0A;              /* 深黑主背景 */
    --bg-secondary: #151517;            /* 次级背景 - 微妙蓝紫色调 */
    --bg-tertiary: #1F1F23;             /* 三级背景 */
    --bg-elevated: #151517;             /* 悬浮/卡片背景 */
    --bg-container: #1A1A1E;            /* 容器背景 */
    --bg-hover: #262629;                /* 悬停背景 */
    
    /* === 文字色系统 === */
    --text-primary: #FFFFFF;            /* 主要文字 - 纯白 */
    --text-secondary: #D9D9DE;          /* 次要文字 - 浅灰白 */
    --text-tertiary: #8E8E93;           /* 辅助文字 - 中灰 */
    --text-quaternary: #565659;         /* 占位符/禁用 - 深灰 */
    --text-inverse: #0A0A0A;            /* 反色文字 - 用于浅色背景 */
    
    /* === 强调色系统 === */
    /* 蓝色 - 更亮更醒目 */
    --accent-blue: #0084FF;             /* 主操作色 - 明亮蓝 */
    --accent-blue-hover: #3BA3FF;       /* 悬停状态 */
    --accent-blue-active: #5CB8FF;      /* 激活状态 */
    --accent-blue-light: #1A3A52;       /* 深色背景 */
    --accent-blue-tint: rgba(0, 132, 255, 0.12);
    
    /* 绿色 - 保持鲜艳 */
    --accent-green: #31D158;            /* 成功状态 - 鲜艳绿 */
    --accent-green-hover: #5DE174;      /* 悬停状态 */
    --accent-green-active: #7AE59B;     /* 激活状态 */
    --accent-green-light: #1A3A26;      /* 深色背景 */
    --accent-green-tint: rgba(49, 209, 88, 0.12);
    
    /* 红色 - 保持醒目 */
    --accent-red: #FF453A;              /* 危险操作 - 亮红 */
    --accent-red-hover: #FF6961;        /* 悬停状态 */
    --accent-red-active: #FF8078;       /* 激活状态 */
    --accent-red-light: #4A1C1A;        /* 深色背景 */
    --accent-red-tint: rgba(255, 69, 58, 0.12);
    
    /* 橙色 */
    --accent-orange: #FF9F0A;           /* 警告提示 - 亮橙 */
    --accent-orange-hover: #FFB340;     /* 悬停状态 */
    --accent-orange-active: #FFC266;    /* 激活状态 */
    --accent-orange-light: #4A3315;     /* 深色背景 */
    --accent-orange-tint: rgba(255, 159, 10, 0.12);
    
    /* 紫色 */
    --accent-purple: #BF5AF2;           /* 特殊标记 - 亮紫 */
    --accent-purple-hover: #D57FFF;     /* 悬停状态 */
    --accent-purple-light: #3A2A47;     /* 深色背景 */
    --accent-purple-tint: rgba(191, 90, 242, 0.12);
    
    --accent-yellow: #FFD60A;
    --accent-yellow-light: #4A3E15;
    --accent-yellow-tint: rgba(255, 214, 10, 0.12);
    
    /* 灰色 */
    --accent-gray: #636366;
    --accent-gray-hover: #787878;
    --accent-gray-light: #2C2C2E;
    
    /* === 语义化颜色 === */
    --color-success: #31D158;
    --color-success-bg: rgba(49, 209, 88, 0.15);
    --color-success-border: rgba(49, 209, 88, 0.25);
    
    --color-warning: #FF9F0A;
    --color-warning-bg: rgba(255, 159, 10, 0.15);
    --color-warning-border: rgba(255, 159, 10, 0.25);
    
    --color-error: #FF453A;
    --color-error-bg: rgba(255, 69, 58, 0.15);
    --color-error-border: rgba(255, 69, 58, 0.25);
    
    --color-info: #0084FF;
    --color-info-bg: rgba(0, 132, 255, 0.15);
    --color-info-border: rgba(0, 132, 255, 0.25);
    
    /* === 边框色系统 === */
    --border-light: #3A3A3E;            /* 浅色边框 */
    --border-medium: #424245;           /* 中等边框 */
    --border-heavy: #555559;            /* 深色边框 */
    --border-opaque: rgba(255, 255, 255, 0.1);
    
    /* === 交互状态 === */
    --hover-bg: rgba(255, 255, 255, 0.08);
    --active-bg: rgba(255, 255, 255, 0.15);
    --selected-bg: rgba(0, 132, 255, 0.2);
    --focus-ring: rgba(0, 132, 255, 0.4);
    
    /* === 叠加层 === */
    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-medium: rgba(0, 0, 0, 0.6);
    --overlay-heavy: rgba(0, 0, 0, 0.8);
    
    /* === 导航栏 === */
    --navbar-bg: rgba(21, 21, 23, 0.7);
    --navbar-border: rgba(255, 255, 255, 0.1);
    
    /* === 阴影系统 (暗色模式下更深) === */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    
    /* === 编辑器特定变量 (暗色模式) === */
    --preview-bg: #000000;              /* 暗色模式下保持纯黑 */
    --preview-label-color: #E8E8ED;     /* 暗色下使用更亮的标签色 */
    --scrollbar-thumb: #3A3A3E;         /* 暗色下的滚动条 */
    --scrollbar-thumb-hover: #636366;   /* 暗色下的滚动条悬停 */
}

/* ========================================
   主题过渡动画
   ======================================== */

html {
    transition: background-color var(--transition-normal),
                color var(--transition-normal);
}

html.theme-transitioning,
html.theme-transitioning * {
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal) !important;
}

/* ========================================
   辅助类 - 快速访问颜色
   ======================================== */

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-quaternary { color: var(--text-quaternary) !important; }

.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-success { background-color: var(--color-success-bg) !important; }
.bg-warning { background-color: var(--color-warning-bg) !important; }
.bg-error { background-color: var(--color-error-bg) !important; }
.bg-info { background-color: var(--color-info-bg) !important; }

/* ========================================
   兼容性别名 (向后兼容旧代码)
   ======================================== */

:root, [data-theme="dark"] {
    /* 语义化别名 */
    --success-text: var(--color-success);
    --success-bg: var(--color-success-bg);
    --success-border: var(--color-success-border);
    
    --warning-text: var(--color-warning);
    --warning-bg: var(--color-warning-bg);
    --warning-border: var(--color-warning-border);
    
    --danger-text: var(--color-error);
    --danger-bg: var(--color-error-bg);
    --danger-border: var(--color-error-border);
    
    --primary-bg: var(--accent-blue);
    --primary-hover: var(--accent-blue-hover);
}