/* ==========================================
   HR系统设计Token系统
   ========================================== */

:root {
    /* ========== 主色系 - 科技蓝 ========== */
    --primary-50: #e6f7ff;
    --primary-100: #bae7ff;
    --primary-200: #91d5ff;
    --primary-300: #69c0ff;
    --primary-400: #40a9ff;
    --primary-500: #1890ff;
    /* 主色 */
    --primary-600: #096dd9;
    --primary-700: #0050b3;
    --primary-800: #003a8c;
    --primary-900: #002766;

    /* ========== 中性灰色系 ========== */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-300: #d9d9d9;
    --gray-400: #bfbfbf;
    --gray-500: #8c8c8c;
    --gray-600: #595959;
    --gray-700: #434343;
    --gray-800: #262626;
    --gray-900: #1f1f1f;
    --gray-1000: #141414;

    /* ========== 功能色 ========== */
    --success-light: #f6ffed;
    --success: #52c41a;
    --success-dark: #389e0d;

    --warning-light: #fffbe6;
    --warning: #faad14;
    --warning-dark: #d48806;

    --error-light: #fff2f0;
    --error: #ff4d4f;
    --error-dark: #cf1322;

    --info-light: #e6f7ff;
    --info: #1890ff;
    --info-dark: #096dd9;

    /* ========== 主题变量（亮色主题） ========== */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #e8eaed;
    --bg-hover: #f5f5f5;
    --bg-active: #e8e8e8;

    --text-primary: #1f1f1f;
    --text-secondary: #595959;
    --text-tertiary: #8c8c8c;
    --text-disabled: #bfbfbf;
    --text-inverse: #ffffff;

    --border-color: #e8e8e8;
    --border-hover: #d9d9d9;
    --border-active: #1890ff;

    --link-color: #1890ff;
    --link-hover: #40a9ff;
    --link-active: #096dd9;

    /* ========== 间距系统 ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ========== 字体系统 ========== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC',
        'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Monaco', 'Menlo', 'Consolas', monospace;

    --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-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;

    /* ========== 圆角 ========== */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ========== 阴影 ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.20);

    /* ========== 过渡时间 ========== */
    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 350ms;
    --transition-slower: 500ms;

    /* ========== 布局尺寸 ========== */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 64px;
    --content-max-width: 1440px;

    /* ========== Z-index ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========== 暗色主题 ========== */
[data-theme="dark"] {
    --bg-primary: #141414;
    --bg-secondary: #1f1f1f;
    --bg-tertiary: #262626;
    --bg-hover: #262626;
    --bg-active: #434343;

    --text-primary: #e8e8e8;
    --text-secondary: #bfbfbf;
    --text-tertiary: #8c8c8c;
    --text-disabled: #595959;
    --text-inverse: #141414;

    --border-color: #434343;
    --border-hover: #595959;
    --border-active: #1890ff;

    --link-color: #40a9ff;
    --link-hover: #69c0ff;
    --link-active: #1890ff;

    /* 暗色主题阴影调整 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.7);
}