/**
 * CSS 全局变量定义
 * 统一管理项目中重复使用的颜色、圆角、过渡、间距等值
 * 所有页面应在 head 中第一个引入此文件
 */

:root {
    /* ===== 主题色 ===== */
    --color-primary: #667eea;
    --color-primary-hover: #5a6fd6;
    --color-primary-light: #764ba2;
    --color-primary-light-dark: #531DAB;
    --color-primary-bg: rgba(102, 126, 234, 0.1);
    --color-primary-border: rgba(102, 126, 234, 0.3);

    /* ===== 功能色 ===== */
    --color-success: #00B42A;
    --color-success-bg: rgba(0, 180, 42, 0.1);
    --color-success-soft: #E8FFEA;
    --color-success-dark: #009A22;
    --color-error: #F53F3F;
    --color-error-bg: rgba(245, 63, 63, 0.1);
    --color-error-soft: #FEF2F2;
    --color-error-dark: #D91906;
    --color-warning: #FF9900;
    --color-warning-bg: rgba(255, 153, 0, 0.1);
    --color-warning-soft: #FFF7E6;
    --color-info: #165DFF;
    --color-info-hover: #3B7AE8;
    --color-info-dark: #0F3DA8;
    --color-info-strong: #66B1FF;
    --color-info-light: #83C0FF;
    --color-info-bg: rgba(22, 93, 255, 0.1);
    --color-info-soft: #E8F0FE;
    --color-info-cyan: #E8F5FE;
    --color-orange: #FA8C16;
    --color-orange-dark: #D46B08;
    --color-orange-light: #FFA940;
    --color-green: #52C41A;
    --color-green-dark: #389E0D;
    --color-green-light: #73D13D;
    --color-green-soft: #B7EB8F;
    --color-cyan: #13C2C2;
    --color-cyan-dark: #08979C;
    --color-pink: #EC4899;
    --color-pink-dark: #DB2777;
    --color-error-hover: #D93026;

    /* ===== 功能色 RGB 值（用于 rgba() 透明度场景） ===== */
    --color-info-rgb: 22, 93, 255;
    --color-info-dark-rgb: 15, 61, 168;
    --color-success-rgb: 0, 180, 42;
    --color-error-rgb: 245, 63, 63;
    --color-warning-rgb: 255, 153, 0;

    /* ===== 插件品牌色（插件共用蓝色主题） ===== */
    --brand-primary: #2B6CF3;
    --brand-primary-dark: #1D4ED8;
    --brand-primary-strong: #4080FF;
    --brand-soft: #E8F0FE;
    --brand-soft-border: #C7D7FE;

    /* ===== 第三方支付/状态品牌色 ===== */
    --color-wechat: #07C160;
    --color-wechat-bg: #ECF9F2;
    --color-alipay-bg: #EBF4FF;

    /* ===== 移动端深色模式背景 ===== */
    --bg-dark-page: #1A1A1A;
    --bg-dark-card: #2A2A2A;
    --bg-dark-input-border: #444444;

    /* ===== 侧边栏暗色主题 ===== */
    --sidebar-bg: #000000;
    --sidebar-border: #21262D;
    --sidebar-text: #FFFFFF;
    --sidebar-text-muted: #B4C1D5;
    --sidebar-scrollbar: #30363D;
    --sidebar-scrollbar-hover: #484F58;
    --sidebar-active-bg: rgba(124, 196, 255, 0.2);
    --sidebar-active-border: #7CC4FF;
    --sidebar-submenu-bg: #161B22;
    --sidebar-danger: #F87171;
    --sidebar-danger-hover: #FCA5A5;

    /* ===== 文字色 ===== */
    --text-primary: #1d2129;
    --text-regular: #4e5969;
    --text-secondary: #86909c;
    --text-placeholder: #c9cdd4;
    --text-disabled: #c9cdd4;
    --text-inverse: #ffffff;
    --text-dark: #1e293b;
    --text-darker: #0f172a;

    /* ===== 背景色 ===== */
    --bg-page: #f5f6f9;
    --bg-card: #ffffff;
    --bg-hover: #f7f8fa;
    --bg-active: #f2f3f5;
    --bg-input: #FAFBFC;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-mask: rgba(0, 0, 0, 0.45);

    /* ===== 边框色 ===== */
    --border-light: #f0f0f0;
    --border-base: #e5e6eb;
    --border-dark: #c9cdd4;
    --border-darker: #86909c;

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

    /* ===== 过渡 ===== */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    --transition-action: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

    /* ===== 阴影 ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* ===== 间距 ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-base: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;

    /* ===== 字体大小 ===== */
    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-xxl: 20px;
    --font-title: 24px;

    /* ===== 层级 ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 2000;
    --z-confirm: 2500;
    --z-captcha: 4000;
    --z-toast: 9999;

    /* ===== 布局 ===== */
    /* 基础尺寸 (默认 1280-1439px) */
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 64px;
    --header-height: 56px;
    --content-padding: 20px;

    /* 大屏 (1440-1919px) */
    --sidebar-width-lg: 240px;
    --sidebar-collapsed-width-lg: 64px;
    --header-height-lg: 64px;
    --content-padding-lg: 28px;

    /* 超大屏 (1920-2559px) */
    --sidebar-width-xl: 260px;
    --sidebar-collapsed-width-xl: 72px;
    --header-height-xl: 72px;
    --content-padding-xl: 36px;

    /* 超超大屏 (2560px+) */
    --sidebar-width-xxl: 280px;
    --sidebar-collapsed-width-xxl: 80px;
    --header-height-xxl: 80px;
    --content-padding-xxl: 48px;

    /* 平板 (769-1024px) */
    --sidebar-width-md: 200px;
    --sidebar-collapsed-width-md: 56px;
    --header-height-md: 52px;
    --content-padding-md: 16px;

    /* 响应式容器最大宽度 */
    --content-max-width: 1200px;
    --content-max-width-lg: 1400px;
    --content-max-width-xl: 1600px;
    --content-max-width-xxl: 1800px;

    /* ===== 响应式断点 ===== */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1440px;
    --breakpoint-xl: 1920px;
    --breakpoint-xxl: 2560px;
}

/* ===== 全局重置：a 标签和 li 标签不需要焦点框 ===== */
a:focus,
a:focus-visible,
li:focus,
li:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* 链接点击时不需要蓝色边框 */
a:active,
a:visited {
    outline: none !important;
    box-shadow: none !important;
}