/**
 * 迹木XYZ AI写作系统 - 统一设计变量系统
 * 基于现代设计系统原则，完美支持日夜模式切换
 * Version: 2.0
 */

/* ===== 亮色主题 (默认) ===== */
:root {
    /* 🎨 基础色彩系统 - 基于Radix Colors概念 */
    
    /* 灰度系统 (12级) */
    --gray-1: #fcfcfc;   --gray-7: #8b8d98;
    --gray-2: #f9f9fb;   --gray-8: #80838d;
    --gray-3: #f0f0f3;   --gray-9: #62636c;
    --gray-4: #e8e8ec;   --gray-10: #4e4f58;
    --gray-5: #e0e1e6;   --gray-11: #3a3b44;
    --gray-6: #d9dae0;   --gray-12: #24252d;
    
    /* 蓝色系统 (品牌主色) */
    --blue-1: #fbfdff;   --blue-7: #0091ff;
    --blue-2: #f4f9ff;   --blue-8: #0588f0;
    --blue-3: #e6f4ff;   --blue-9: #0d7fdc;  /* 品牌主色 */
    --blue-4: #d1ecff;   --blue-10: #0969c3;
    --blue-5: #b7defd;   --blue-11: #0c5aa6;
    --blue-6: #96cefc;   --blue-12: #0d1520;
    
    /* 绿色系统 (成功状态) */
    --green-1: #fbfefc;  --green-7: #16a085;
    --green-2: #f4fbf7;  --green-8: #138d75;
    --green-3: #e6f7ed;  --green-9: #059669;  /* 成功色 */
    --green-4: #d3f0dc;  --green-10: #047857;
    --green-5: #bbe7c8;  --green-11: #065f46;
    --green-6: #9dd9b3;  --green-12: #0d1912;
    
    /* 红色系统 (错误状态) */
    --red-1: #fffcfc;    --red-7: #ff6166;
    --red-2: #fff7f7;    --red-8: #f85149;
    --red-3: #feebec;    --red-9: #e5484d;   /* 错误色 */
    --red-4: #fdd8db;    --red-10: #dc2626;
    --red-5: #f9c6ca;    --red-11: #b91c1c;
    --red-6: #f3b0b7;    --red-12: #1d1418;
    
    /* 黄色系统 (警告状态) */
    --yellow-1: #fffdf9; --yellow-7: #f5a524;
    --yellow-2: #fffbe6; --yellow-8: #f59e0b;
    --yellow-3: #fff4c2; --yellow-9: #d97706; /* 警告色 */
    --yellow-4: #ffe770; --yellow-10: #b45309;
    --yellow-5: #ffdc00; --yellow-11: #92400e;
    --yellow-6: #e6c200; --yellow-12: #1c1917;

    /* ===== 语义化变量映射 ===== */
    
    /* 背景色系统 */
    --bg-primary: var(--gray-1);      /* 主背景 - 最浅 */
    --bg-secondary: var(--gray-2);    /* 次背景 - 浅灰 */
    --bg-tertiary: var(--gray-3);     /* 第三背景 - 中浅灰 */
    --bg-quaternary: var(--gray-4);   /* 第四背景 - 中灰 */
    --bg-elevated: var(--gray-1);     /* 悬浮背景 */
    --bg-hover: var(--gray-2);        /* 悬停背景 */
    --bg-active: var(--gray-3);       /* 激活背景 */
    --bg-accent: var(--blue-2);       /* 强调背景 */
    --bg-brand: var(--blue-3);        /* 品牌背景 */
    
    /* 文字颜色系统 */
    --text-primary: var(--gray-12);   /* 主要文字 - 最深 */
    --text-secondary: var(--gray-11); /* 次要文字 - 深灰 */
    --text-tertiary: var(--gray-10);  /* 第三文字 - 中深灰 */
    --text-quaternary: var(--gray-9); /* 第四文字 - 中灰 */
    --text-muted: var(--gray-8);      /* 静默文字 - 浅灰 */
    --text-disabled: var(--gray-7);   /* 禁用文字 - 很浅灰 */
    --text-inverse: var(--gray-1);    /* 反色文字 - 白色 */
    --text-on-accent: var(--blue-12); /* 强调色上的文字 */
    
    /* 边框颜色系统 */
    --border-primary: var(--gray-6);   /* 主要边框 */
    --border-secondary: var(--gray-5); /* 次要边框 */
    --border-tertiary: var(--gray-4);  /* 第三边框 */
    --border-muted: var(--gray-3);     /* 静默边框 */
    --border-focus: var(--blue-8);     /* 焦点边框 */
    --border-error: var(--red-8);      /* 错误边框 */
    --border-success: var(--green-8);  /* 成功边框 */
    --border-warning: var(--yellow-8); /* 警告边框 */
    
    /* 品牌色系统 */
    --brand-primary: var(--blue-9);    /* 主品牌色 */
    --brand-secondary: var(--blue-8);  /* 次品牌色 */
    --brand-hover: var(--blue-10);     /* 品牌悬停 */
    --brand-active: var(--blue-11);    /* 品牌激活 */
    --brand-muted: var(--blue-4);      /* 品牌静默 */
    
    /* 语义色系统 */
    --success-color: var(--green-9);   /* 成功色 */
    --success-hover: var(--green-10);  /* 成功悬停 */
    --success-muted: var(--green-3);   /* 成功静默 */
    --error-color: var(--red-9);       /* 错误色 */
    --error-hover: var(--red-10);      /* 错误悬停 */
    --error-muted: var(--red-3);       /* 错误静默 */
    --warning-color: var(--yellow-9);  /* 警告色 */
    --warning-hover: var(--yellow-10); /* 警告悬停 */
    --warning-muted: var(--yellow-3);  /* 警告静默 */
    --info-color: var(--blue-9);       /* 信息色 */
    --info-hover: var(--blue-10);      /* 信息悬停 */
    --info-muted: var(--blue-3);       /* 信息静默 */
    
    /* ===== 设计系统Tokens ===== */
    
    /* 间距系统 (基于4px) */
    --space-1: 4px;      /* 0.25rem */
    --space-2: 8px;      /* 0.5rem */
    --space-3: 12px;     /* 0.75rem */
    --space-4: 16px;     /* 1rem */
    --space-5: 20px;     /* 1.25rem */
    --space-6: 24px;     /* 1.5rem */
    --space-8: 32px;     /* 2rem */
    --space-10: 40px;    /* 2.5rem */
    --space-12: 48px;    /* 3rem */
    --space-16: 64px;    /* 4rem */
    --space-20: 80px;    /* 5rem */
    --space-24: 96px;    /* 6rem */
    --space-32: 128px;   /* 8rem */
    
    /* 圆角系统 */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    
    /* 阴影系统 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
    
    /* 字体系统 */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    --font-family-serif: 'Times New Roman', Times, serif;
    
    /* 字体大小系统 */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 60px;
    
    /* 行高系统 */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* 字重系统 */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* 过渡动画系统 */
    --transition-none: none;
    --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-colors: 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);
    --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index系统 */
    --z-hide: -1;
    --z-base: 0;
    --z-docked: 10;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-banner: 1200;
    --z-overlay: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-skiplink: 1600;
    --z-toast: 1700;
    --z-tooltip: 1800;
}

/* ===== 暗色主题 ===== */
[data-theme="dark"] {
    /* 🌙 暗色灰度系统 (反转) */
    --gray-1: #161618;   --gray-7: #696969;
    --gray-2: #1c1c1f;   --gray-8: #7c7c7c;
    --gray-3: #232326;   --gray-9: #8d8d8d;
    --gray-4: #28282c;   --gray-10: #a4a4a4;
    --gray-5: #2e2e32;   --gray-11: #b6b6b6;
    --gray-6: #34343a;   --gray-12: #eeeeee;
    
    /* 🌙 暗色蓝色系统 */
    --blue-1: #0d1520;   --blue-7: #0084ff;
    --blue-2: #111927;   --blue-8: #3694ff;
    --blue-3: #0d2847;   --blue-9: #0091ff;  /* 暗色品牌主色 */
    --blue-4: #003362;   --blue-10: #369eff;
    --blue-5: #004074;   --blue-11: #52a9ff;
    --blue-6: #104d87;   --blue-12: #eef6ff;
    
    /* 🌙 暗色绿色系统 */
    --green-1: #0d1912;  --green-7: #46a758;
    --green-2: #0f1b13;  --green-8: #55b467;
    --green-3: #132819;  --green-9: #30a46c;  /* 暗色成功色 */
    --green-4: #16301d;  --green-10: #3cb179;
    --green-5: #193921;  --green-11: #4cc38a;
    --green-6: #20452a;  --green-12: #e5fbeb;
    
    /* 🌙 暗色红色系统 */
    --red-1: #1d1418;    --red-7: #ff6369;
    --red-2: #27141c;    --red-8: #ff7c81;
    --red-3: #3c1827;    --red-9: #e5484d;   /* 暗色错误色 */
    --red-4: #481a2d;    --red-10: #f16066;
    --red-5: #541b33;    --red-11: #ff9592;
    --red-6: #671e3a;    --red-12: #feecee;
    
    /* 🌙 暗色黄色系统 */
    --yellow-1: #1c1917; --yellow-7: #ffb224;
    --yellow-2: #221a16; --yellow-8: #ffcb47;
    --yellow-3: #302008; --yellow-9: #f5c211; /* 暗色警告色 */
    --yellow-4: #3f2700; --yellow-10: #f9d72c;
    --yellow-5: #4d3000; --yellow-11: #fde047;
    --yellow-6: #5c3a02; --yellow-12: #fffbeb;

    /* ===== 暗色语义变量重新映射 ===== */
    
    /* 背景色系统 (暗色) */
    --bg-primary: var(--gray-1);      /* 最深背景 */
    --bg-secondary: var(--gray-2);    /* 深灰背景 */
    --bg-tertiary: var(--gray-3);     /* 中深灰背景 */
    --bg-quaternary: var(--gray-4);   /* 中灰背景 */
    --bg-elevated: var(--gray-2);     /* 悬浮背景稍亮 */
    --bg-hover: var(--gray-3);        /* 悬停背景 */
    --bg-active: var(--gray-4);       /* 激活背景 */
    --bg-accent: var(--blue-2);       /* 强调背景 */
    --bg-brand: var(--blue-3);        /* 品牌背景 */
    
    /* 文字颜色系统 (暗色) */
    --text-primary: var(--gray-12);   /* 最亮文字 */
    --text-secondary: var(--gray-11); /* 亮灰文字 */
    --text-tertiary: var(--gray-10);  /* 中亮灰文字 */
    --text-quaternary: var(--gray-9); /* 中灰文字 */
    --text-muted: var(--gray-8);      /* 暗灰文字 */
    --text-disabled: var(--gray-7);   /* 禁用文字 */
    --text-inverse: var(--gray-1);    /* 反色文字 */
    --text-on-accent: var(--blue-12); /* 强调色上的文字 */
    
    /* 边框颜色系统 (暗色) */
    --border-primary: var(--gray-6);   /* 主要边框 */
    --border-secondary: var(--gray-5); /* 次要边框 */
    --border-tertiary: var(--gray-4);  /* 第三边框 */
    --border-muted: var(--gray-3);     /* 静默边框 */
    --border-focus: var(--blue-8);     /* 焦点边框 */
    --border-error: var(--red-8);      /* 错误边框 */
    --border-success: var(--green-8);  /* 成功边框 */
    --border-warning: var(--yellow-8); /* 警告边框 */
    
    /* 品牌色系统 (暗色) */
    --brand-primary: var(--blue-9);    /* 暗色主品牌色 */
    --brand-secondary: var(--blue-8);  /* 暗色次品牌色 */
    --brand-hover: var(--blue-10);     /* 暗色品牌悬停 */
    --brand-active: var(--blue-11);    /* 暗色品牌激活 */
    --brand-muted: var(--blue-4);      /* 暗色品牌静默 */
    
    /* 语义色系统 (暗色) */
    --success-color: var(--green-9);   /* 暗色成功色 */
    --success-hover: var(--green-10);  /* 暗色成功悬停 */
    --success-muted: var(--green-3);   /* 暗色成功静默 */
    --error-color: var(--red-9);       /* 暗色错误色 */
    --error-hover: var(--red-10);      /* 暗色错误悬停 */
    --error-muted: var(--red-3);       /* 暗色错误静默 */
    --warning-color: var(--yellow-9);  /* 暗色警告色 */
    --warning-hover: var(--yellow-10); /* 暗色警告悬停 */
    --warning-muted: var(--yellow-3);  /* 暗色警告静默 */
    --info-color: var(--blue-9);       /* 暗色信息色 */
    --info-hover: var(--blue-10);      /* 暗色信息悬停 */
    --info-muted: var(--blue-3);       /* 暗色信息静默 */
    
    /* 暗色特定阴影调整 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* ===== 全局基础样式应用 ===== */

/* 确保平滑主题切换 */
* {
    transition: var(--transition-colors);
}

/* 基础布局样式 */
body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 避免主题切换时闪烁 */
.theme-switching * {
    transition: none !important;
}