/**
 * CSS 变量定义
 * 需要在 HTML 中最先引入: <link rel="stylesheet" href="/web/css/variables.css">
 */

:root {
    /* Element Plus compatible tokens */
    --el-color-primary: #409EFF;
    --el-color-primary-light-3: #79BBFF;
    --el-color-primary-light-5: #A0CFFF;
    --el-color-primary-light-7: #C6E2FF;
    --el-color-primary-light-8: #D9ECFF;
    --el-color-primary-light-9: #ECF5FF;
    --el-color-primary-dark-2: #337ECC;
    --el-color-success: #67C23A;
    --el-color-success-light-9: #F0F9EB;
    --el-color-warning: #E6A23C;
    --el-color-warning-light-9: #FDF6EC;
    --el-color-danger: #F56C6C;
    --el-color-danger-light-9: #FEF0F0;
    --el-color-info: #909399;
    --el-color-info-light-9: #F4F4F5;
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #A8ABB2;
    --el-border-color: #DCDFE6;
    --el-border-color-light: #E4E7ED;
    --el-border-color-lighter: #EBEEF5;
    --el-border-color-extra-light: #F2F6FC;
    --el-fill-color: #F0F2F5;
    --el-fill-color-light: #F5F7FA;
    --el-fill-color-lighter: #FAFAFA;
    --el-bg-color: #FFFFFF;
    --el-bg-color-page: #F5F7FA;
    --el-border-radius-base: 4px;
    --el-border-radius-small: 2px;
    --el-border-radius-round: 20px;
    --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.08);
    --el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.06);
    --el-transition-duration: 0.2s;

    /* Project semantic colors mapped to Element Plus */
    --color-bg: var(--el-bg-color-page);
    --color-surface: var(--el-bg-color);
    --color-primary: var(--el-text-color-primary);
    --color-accent: var(--el-color-primary);
    --color-accent-hover: var(--el-color-primary-dark-2);
    --color-accent-light: var(--el-color-primary-light-9);
    --color-text: var(--el-text-color-primary);
    --color-text-secondary: var(--el-text-color-regular);
    --color-text-muted: var(--el-text-color-secondary);
    --color-border: var(--el-border-color-light);
    --color-success: var(--el-color-success);
    --color-success-bg: var(--el-color-success-light-9);
    --color-error: var(--el-color-danger);
    --color-error-bg: var(--el-color-danger-light-9);
    --color-warning: var(--el-color-warning);
    --color-warning-bg: var(--el-color-warning-light-9);
    --color-info: var(--el-color-info);
    --color-info-bg: var(--el-color-info-light-9);
    --color-purple: #9254DE;
    --color-purple-bg: #F9F0FF;
    --color-cyan: #13C2C2;
    --color-cyan-bg: #E6FFFB;
    --color-pink: #EB2F96;
    --color-pink-bg: #FFF0F6;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: var(--el-box-shadow-lighter);
    --shadow-md: var(--el-box-shadow-light);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

    /* Transitions */
    --transition: var(--el-transition-duration) ease;
    --transition-slow: 240ms ease;

    /* Fonts */
    --font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[v-cloak] { display: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}