/**
 * 迹木XYZ AI写作系统 - Radix Colors专业配色系统
 * 基于Radix UI Colors的现代化色彩工具类
 * 支持完整的明暗主题切换
 * Version: 3.0
 */

/* ===== 扩展色彩系统 ===== */

:root {
    /* 🎨 紫色系统 - 高端品牌色 */
    --purple-1: #fefcfe; --purple-7: #8e4ec6;
    --purple-2: #fdf7fd; --purple-8: #8347b9;
    --purple-3: #f9edfc; --purple-9: #8145b5;  /* 紫色主色 */
    --purple-4: #f3d9fa; --purple-10: #714ea8;
    --purple-5: #ebc5f0; --purple-11: #5e3a8c;
    --purple-6: #d8a9dd; --purple-12: #2d1b69;
    
    /* 🎨 橙色系统 - 活力色彩 */
    --orange-1: #fefcfb; --orange-7: #f76707;
    --orange-2: #fff7ed; --orange-8: #e54d2e;
    --orange-3: #ffecd6; --orange-9: #d6561d;  /* 橙色主色 */
    --orange-4: #ffdbba; --orange-10: #ba4019;
    --orange-5: #ffc692; --orange-11: #a0331c;
    --orange-6: #ffad5b; --orange-12: #1f0c01;
    
    /* 🎨 青色系统 - 科技感 */
    --cyan-1: #fafefd; --cyan-7: #12a594;
    --cyan-2: #f2fffe; --cyan-8: #0e8e7e;
    --cyan-3: #ddfaf8; --cyan-9: #0d8b7a;   /* 青色主色 */
    --cyan-4: #b7f0ea; --cyan-10: #067863;
    --cyan-5: #86e8dd; --cyan-11: #016353;
    --cyan-6: #4cdccb; --cyan-12: #002d20;
    
    /* 🎨 粉色系统 - 温馨感 */
    --pink-1: #fffcfe; --pink-7: #d6336c;
    --pink-2: #fef7f9; --pink-8: #c2255c;
    --pink-3: #fee9f0; --pink-9: #cd1d8d;   /* 粉色主色 */
    --pink-4: #fdd2e1; --pink-10: #a61e5d;
    --pink-5: #f9b5d0; --pink-11: #8e1f4f;
    --pink-6: #f093b0; --pink-12: #1f0d16;
    
    /* 🎨 石墨色系统 - 中性色 */
    --slate-1: #fcfcfd; --slate-7: #68718a;
    --slate-2: #f8f9fa; --slate-8: #5b6475;
    --slate-3: #f1f3f5; --slate-9: #4c5561;  /* 石墨主色 */
    --slate-4: #eaedf0; --slate-10: #424953;
    --slate-5: #e1e5e9; --slate-11: #31363f;
    --slate-6: #d7dce2; --slate-12: #1c2024;
}

/* ===== 暗色主题扩展 ===== */
[data-theme="dark"] {
    /* 🌙 暗色紫色系统 */
    --purple-1: #1b141d; --purple-7: #b782d9;
    --purple-2: #221527; --purple-8: #bf92e4;
    --purple-3: #351a35; --purple-9: #8145b5;  /* 暗色紫色 */
    --purple-4: #451d47; --purple-10: #9659c4;
    --purple-5: #512161; --purple-11: #aa6dd2;
    --purple-6: #652876; --purple-12: #f4f0ff;
    
    /* 🌙 暗色橙色系统 */
    --orange-1: #1f1206; --orange-7: #ff8b3e;
    --orange-2: #2b1400; --orange-8: #ff9252;
    --orange-3: #391a03; --orange-9: #d6561d;  /* 暗色橙色 */
    --orange-4: #4a2009; --orange-10: #ec6d28;
    --orange-5: #5f2315; --orange-11: #ff802b;
    --orange-6: #762b00; --orange-12: #fef2e9;
    
    /* 🌙 暗色青色系统 */
    --cyan-1: #0b161a; --cyan-7: #22d1c0;
    --cyan-2: #101b20; --cyan-8: #33dbc8;
    --cyan-3: #082329; --cyan-9: #0d8b7a;   /* 暗色青色 */
    --cyan-4: #0d2d35; --cyan-10: #12a594;
    --cyan-5: #103a44; --cyan-11: #0ac5b3;
    --cyan-6: #134e5e; --cyan-12: #adf0dd;
    
    /* 🌙 暗色粉色系统 */
    --pink-1: #1f121a; --pink-7: #e54980;
    --pink-2: #29132e; --pink-8: #f55f95;
    --pink-3: #3d1a2e; --pink-9: #cd1d8d;   /* 暗色粉色 */
    --pink-4: #4e1d35; --pink-10: #d6409f;
    --pink-5: #5e2141; --pink-11: #e668a7;
    --pink-6: #734155; --pink-12: #fdeef4;
    
    /* 🌙 暗色石墨系统 */
    --slate-1: #16181d; --slate-7: #9ba1b0;
    --slate-2: #1a1d23; --slate-8: #a8adb8;
    --slate-3: #202530; --slate-9: #4c5561;  /* 暗色石墨 */
    --slate-4: #252a37; --slate-10: #697386;
    --slate-5: #2b3141; --slate-11: #9ba1b0;
    --slate-6: #313b4c; --slate-12: #f0f4f7;
}

/* ===== 色彩实用类 ===== */

/* 文字颜色类 */
.text-gray-50 { color: var(--gray-1); }
.text-gray-100 { color: var(--gray-2); }
.text-gray-200 { color: var(--gray-3); }
.text-gray-300 { color: var(--gray-4); }
.text-gray-400 { color: var(--gray-5); }
.text-gray-500 { color: var(--gray-6); }
.text-gray-600 { color: var(--gray-7); }
.text-gray-700 { color: var(--gray-8); }
.text-gray-800 { color: var(--gray-9); }
.text-gray-900 { color: var(--gray-10); }
.text-gray-950 { color: var(--gray-12); }

.text-blue-50 { color: var(--blue-1); }
.text-blue-500 { color: var(--blue-6); }
.text-blue-600 { color: var(--blue-9); }
.text-blue-700 { color: var(--blue-10); }

.text-green-50 { color: var(--green-1); }
.text-green-500 { color: var(--green-6); }
.text-green-600 { color: var(--green-9); }
.text-green-700 { color: var(--green-10); }

.text-red-50 { color: var(--red-1); }
.text-red-500 { color: var(--red-6); }
.text-red-600 { color: var(--red-9); }
.text-red-700 { color: var(--red-10); }

.text-yellow-50 { color: var(--yellow-1); }
.text-yellow-500 { color: var(--yellow-6); }
.text-yellow-600 { color: var(--yellow-9); }
.text-yellow-700 { color: var(--yellow-10); }

.text-purple-500 { color: var(--purple-6); }
.text-purple-600 { color: var(--purple-9); }
.text-orange-500 { color: var(--orange-6); }
.text-orange-600 { color: var(--orange-9); }
.text-cyan-500 { color: var(--cyan-6); }
.text-cyan-600 { color: var(--cyan-9); }
.text-pink-500 { color: var(--pink-6); }
.text-pink-600 { color: var(--pink-9); }

/* 背景颜色类 */
.bg-gray-50 { background-color: var(--gray-1); }
.bg-gray-100 { background-color: var(--gray-2); }
.bg-gray-200 { background-color: var(--gray-3); }
.bg-gray-300 { background-color: var(--gray-4); }
.bg-gray-800 { background-color: var(--gray-9); }
.bg-gray-900 { background-color: var(--gray-10); }

.bg-blue-50 { background-color: var(--blue-1); }
.bg-blue-100 { background-color: var(--blue-2); }
.bg-blue-500 { background-color: var(--blue-6); }
.bg-blue-600 { background-color: var(--blue-9); }
.bg-blue-700 { background-color: var(--blue-10); }

.bg-green-50 { background-color: var(--green-1); }
.bg-green-100 { background-color: var(--green-2); }
.bg-green-500 { background-color: var(--green-6); }
.bg-green-600 { background-color: var(--green-9); }

.bg-red-50 { background-color: var(--red-1); }
.bg-red-100 { background-color: var(--red-2); }
.bg-red-500 { background-color: var(--red-6); }
.bg-red-600 { background-color: var(--red-9); }

.bg-yellow-50 { background-color: var(--yellow-1); }
.bg-yellow-100 { background-color: var(--yellow-2); }
.bg-yellow-500 { background-color: var(--yellow-6); }

.bg-purple-50 { background-color: var(--purple-1); }
.bg-purple-500 { background-color: var(--purple-6); }
.bg-orange-50 { background-color: var(--orange-1); }
.bg-orange-500 { background-color: var(--orange-6); }
.bg-cyan-50 { background-color: var(--cyan-1); }
.bg-cyan-500 { background-color: var(--cyan-6); }
.bg-pink-50 { background-color: var(--pink-1); }
.bg-pink-500 { background-color: var(--pink-6); }

/* 边框颜色类 */
.border-gray-200 { border-color: var(--gray-3); }
.border-gray-300 { border-color: var(--gray-4); }
.border-gray-400 { border-color: var(--gray-5); }
.border-blue-200 { border-color: var(--blue-3); }
.border-blue-500 { border-color: var(--blue-6); }
.border-green-200 { border-color: var(--green-3); }
.border-green-500 { border-color: var(--green-6); }
.border-red-200 { border-color: var(--red-3); }
.border-red-500 { border-color: var(--red-6); }
.border-yellow-200 { border-color: var(--yellow-3); }
.border-yellow-500 { border-color: var(--yellow-6); }

/* ===== 语义化色彩类 ===== */

/* 状态颜色 */
.text-success { color: var(--success-color); }
.text-error { color: var(--error-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }

.bg-success { background-color: var(--success-color); }
.bg-error { background-color: var(--error-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-info { background-color: var(--info-color); }

.bg-success-muted { background-color: var(--success-muted); }
.bg-error-muted { background-color: var(--error-muted); }
.bg-warning-muted { background-color: var(--warning-muted); }
.bg-info-muted { background-color: var(--info-muted); }

/* 品牌颜色 */
.text-brand { color: var(--brand-primary); }
.bg-brand { background-color: var(--brand-primary); }
.border-brand { border-color: var(--brand-primary); }

/* ===== 渐变色系统 ===== */

/* 品牌渐变 */
.bg-gradient-brand {
    background: linear-gradient(135deg, var(--blue-6) 0%, var(--blue-9) 100%);
}

.bg-gradient-brand-reverse {
    background: linear-gradient(135deg, var(--blue-9) 0%, var(--blue-6) 100%);
}

/* 成功渐变 */
.bg-gradient-success {
    background: linear-gradient(135deg, var(--green-6) 0%, var(--green-9) 100%);
}

/* 警告渐变 */
.bg-gradient-warning {
    background: linear-gradient(135deg, var(--yellow-6) 0%, var(--orange-6) 100%);
}

/* 错误渐变 */
.bg-gradient-error {
    background: linear-gradient(135deg, var(--red-6) 0%, var(--red-9) 100%);
}

/* 中性渐变 */
.bg-gradient-gray {
    background: linear-gradient(135deg, var(--gray-1) 0%, var(--gray-3) 100%);
}

/* 彩虹渐变 */
.bg-gradient-rainbow {
    background: linear-gradient(135deg, 
        var(--blue-6) 0%, 
        var(--purple-6) 25%, 
        var(--pink-6) 50%, 
        var(--orange-6) 75%, 
        var(--yellow-6) 100%
    );
}

/* ===== 悬停状态 ===== */

/* 悬停文字颜色 */
.hover-text-brand:hover { color: var(--brand-hover); }
.hover-text-success:hover { color: var(--success-hover); }
.hover-text-error:hover { color: var(--error-hover); }
.hover-text-warning:hover { color: var(--warning-hover); }

/* 悬停背景颜色 */
.hover-bg-gray:hover { background-color: var(--bg-hover); }
.hover-bg-brand:hover { background-color: var(--brand-hover); }
.hover-bg-success:hover { background-color: var(--success-hover); }
.hover-bg-error:hover { background-color: var(--error-hover); }

/* ===== 焦点状态 ===== */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-muted);
}

.focus-ring-success:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--success-muted);
}

.focus-ring-error:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--error-muted);
}

/* ===== 主题相关样式 ===== */

/* 自动适应主题的边框 */
.border-adaptive {
    border-color: var(--border-primary);
}

/* 自动适应主题的背景 */
.bg-adaptive {
    background-color: var(--bg-primary);
}

.bg-adaptive-secondary {
    background-color: var(--bg-secondary);
}

/* 自动适应主题的文字 */
.text-adaptive {
    color: var(--text-primary);
}

.text-adaptive-muted {
    color: var(--text-muted);
}

/* ===== 工具类 ===== */

/* 透明度 */
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* 色彩过渡 */
.transition-colors {
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 色彩可访问性 ===== */

/* 高对比度文字 */
.text-high-contrast {
    color: var(--text-primary);
}

/* 中对比度文字 */
.text-medium-contrast {
    color: var(--text-secondary);
}

/* 低对比度文字 */
.text-low-contrast {
    color: var(--text-muted);
}