/**
 * IPD CSS 变量系统
 * 版本: 1.0.0
 * 更新时间: 2026-04-15
 *
 * 统一管理 CSS 变量，便于主题定制和样式维护
 */

/* ========== 颜色系统 ========== */
:root {
    /* 主色调 */
    --color-primary: #1890FF;
    --color-primary-hover: #40a9ff;
    --color-primary-light: #e6f7ff;

    /* 状态色 */
    --color-success: #52C41A;
    --color-success-light: #f6ffed;
    --color-warning: #FAAD14;
    --color-warning-light: #fffbe6;
    --color-danger: #F5222D;
    --color-danger-light: #fff1f0;
    --color-info: #1890FF;
    --color-info-light: #e6f7ff;

    /* 会议相关颜色 */
    --color-meeting: #722ED1;
    --color-meeting-light: #f9f0ff;

    /* 任务状态颜色 */
    --color-task-green: #52C41A;
    --color-task-yellow: #FAAD14;
    --color-task-red: #F5222D;
    --color-task-orange: #FA8C16;

    /* 风险等级颜色 */
    --color-risk-normal: #52C41A;
    --color-risk-warning: #FA8C16;
    --color-risk-high: #F5222D;

    /* 背景色 */
    --color-bg: #F0F2F5;
    --color-bg-white: #ffffff;
    --color-bg-hover: #f5f5f5;
    --color-bg-active: #e6f7ff;

    /* 文字颜色 */
    --color-text-primary: #262626;
    --color-text-secondary: #595959;
    --color-text-tertiary: #8c8c8c;
    --color-text-disabled: #bfbfbf;

    /* 边框颜色 */
    --color-border: #d9d9d9;
    --color-border-light: #f0f0f0;

    /* 领域颜色 */
    --color-domain-product: #1890ff;
    --color-domain-dev: #52c41a;
    --color-domain-sales: #fa8c16;
    --color-domain-delivery: #722ed1;
    --color-domain-marketing: #13c2c2;
    --color-domain-customer: #f5222d;
}

/* ========== 间距系统 ========== */
:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
}

/* ========== 字体大小 ========== */
:root {
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
}

/* ========== 圆角 ========== */
:root {
    --border-radius-sm: 2px;
    --border-radius-base: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
}

/* ========== 阴影 ========== */
:root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ========== 过渡 ========== */
:root {
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ========== Z-Index 层级 ========== */
:root {
    --z-index-dropdown: 1000;
    --z-index-modal: 1050;
    --z-index-toast: 10000;
    --z-index-tooltip: 1100;
}

/* ========== 布局尺寸 ========== */
:root {
    --sidebar-width: 200px;
    --header-height: 60px;
    --content-padding: 20px;
    --card-padding: 16px;
}

/* ========== 通用样式类 ========== */

/* Flex 布局 */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* 文本 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

/* 间距 */
.m-0 { margin: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* 状态标签 */
.tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-sm);
}
.tag-green { background: var(--color-success-light); color: var(--color-success); }
.tag-yellow { background: var(--color-warning-light); color: var(--color-warning); }
.tag-red { background: var(--color-danger-light); color: var(--color-danger); }
.tag-blue { background: var(--color-info-light); color: var(--color-info); }

/* 状态样式 */
.status-blue { color: var(--color-primary); }
.status-green { color: var(--color-success); }
.status-gray { color: var(--color-text-tertiary); }
.status-red { color: var(--color-danger); }
.status-yellow { color: var(--color-warning); }

/* 风险样式 */
.risk-low { color: var(--color-risk-normal); }
.risk-medium { color: var(--color-risk-warning); }
.risk-high { color: var(--color-risk-high); }

/* 空状态 */
.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}