/* ========================================
   思维迷宫个人博客系统 - UI设计系统变量
   版本：4.0.0-SNAPSHOT
   作者：benchen79
   邮箱：864210092@qq.com
   官网：https://www.gzsewer.cn
   ======================================== */

:root {
    /* ====== 主色调 (三原色系统) ====== */
    --primary-color: #1890ff;      /* 蓝色 - 主要操作、链接 */
    --success-color: #52c41a;      /* 绿色 - 成功状态、确认操作 */
    --danger-color: #f5222d;       /* 红色 - 危险操作、错误状态 */
    
    /* ====== 思维迷宫主题色 ====== */
    --maze-orange: #ff7f00;        /* 思维迷宫主橙色 */
    --maze-cyan: #00bfff;          /* 思维迷宫辅助青色 */
    
    /* ====== 辅助色调 ====== */
    --primary-light: #69c0ff;      /* 浅蓝色 - 悬停状态 */
    --primary-dark: #096dd9;       /* 深蓝色 - 激活状态 */
    --success-light: #95de64;      /* 浅绿色 - 成功提示背景 */
    --danger-light: #ff7875;       /* 浅红色 - 错误提示背景 */
    
    /* ====== 中性色调 ====== */
    --text-primary: #262626;       /* 主要文本 */
    --text-secondary: #8c8c8c;     /* 次要文本 */
    --border-color: #d9d9d9;       /* 边框颜色 */
    --background-light: #fafafa;   /* 浅色背景 */
    --white: #ffffff;              /* 纯白色 */
    
    /* ====== 字体系统 (两级字号) ====== */
    --font-size-large: 16px;       /* 大字号 - 标题、重要信息 */
    --font-size-normal: 14px;      /* 正常字号 - 正文、表单 */
    
    /* ====== 字重规范 ====== */
    --font-weight-normal: 400;     /* 正常字重 */
    --font-weight-medium: 500;     /* 中等字重 */
    --font-weight-bold: 600;       /* 粗体字重 */
    
    /* ====== 行高规范 ====== */
    --line-height-large: 1.5;      /* 大字号行高 */
    --line-height-normal: 1.4;     /* 正常字号行高 */
    
    /* ====== 间距系统 (8px倍数) ====== */
    --spacing-xs: 8px;             /* 极小间距 */
    --spacing-sm: 16px;            /* 小间距 */
    --spacing-md: 24px;            /* 中等间距 */
    --spacing-lg: 32px;            /* 大间距 */
    --spacing-xl: 40px;            /* 极大间距 */
    
    /* ====== 其他设计规范 ====== */
    --border-radius: 4px;          /* 统一圆角 */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 浅色阴影 */
    --shadow-normal: 0 4px 12px rgba(0, 0, 0, 0.15); /* 正常阴影 */
    --transition-normal: 0.3s ease; /* 统一过渡效果 */
}

/* ====== 基础样式重置 ====== */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--white);
    margin: 0;
    padding: 0;
}

/* ====== 文本工具类 ====== */
.text-large { 
    font-size: var(--font-size-large); 
    line-height: var(--line-height-large);
}

.text-normal { 
    font-size: var(--font-size-normal); 
    line-height: var(--line-height-normal);
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-maze-orange { color: var(--maze-orange); }
.text-maze-cyan { color: var(--maze-cyan); }

/* ====== 间距工具类 ====== */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

/* ====== 布局工具类 ====== */
.d-flex { display: flex; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ====== 权限指示器样式 ====== */
.permission-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.permission-level-0 {
    background-color: #f5f5f5;
    color: #8c8c8c;
}

.permission-level-1 {
    background-color: #e6f7ff;
    color: var(--primary-color);
}

.permission-level-2 {
    background-color: #fff2e8;
    color: var(--maze-orange);
}

.permission-level-3 {
    background-color: #f6ffed;
    color: var(--success-color);
}

.permission-level-4 {
    background-color: #fff1f0;
    color: var(--danger-color);
}

/* ====== 响应式断点 ====== */
@media (max-width: 576px) {
    :root {
        --font-size-large: 14px;
        --font-size-normal: 12px;
        --spacing-lg: 24px;
        --spacing-xl: 32px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    :root {
        --spacing-xl: 36px;
    }
}

/* ====== 无障碍访问 ====== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ====== 动画和过渡 ====== */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.fade-out {
    animation: fadeOut 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.transition-all {
    transition: all var(--transition-normal);
}

/* ====== 滚动条样式 ====== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-light);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}