/**
 * Arco Design 全局设计变量 v2
 * 所有公共组件和页面品牌色均从这里读取，业务语义色保持独立。
 * 暗色模式通过覆盖这些变量实现，不再使用 !important。
 */

/* ========== Light Mode (默认) ========== */
:root,
html[data-theme="light"] {
    color-scheme: light;

    /* 品牌色板 */
    --arcoblue-1: #E8F3FF;
    --arcoblue-2: #BEDAFF;
    --arcoblue-3: #94BFFF;
    --arcoblue-4: #6AA1FF;
    --arcoblue-5: #4080FF;
    --arcoblue-6: #165DFF;
    --arcoblue-7: #0E42D2;
    --arcoblue-8: #072CA6;
    --arcoblue-9: #031A79;
    --arcoblue-10: #000D4D;

    --color-primary-1: var(--arcoblue-1);
    --color-primary-2: var(--arcoblue-2);
    --color-primary-3: var(--arcoblue-3);
    --color-primary-4: var(--arcoblue-4);
    --color-primary-5: var(--arcoblue-5);
    --color-primary-6: var(--arcoblue-6);
    --color-primary-7: var(--arcoblue-7);
    --color-primary-8: var(--arcoblue-8);
    --color-primary-9: var(--arcoblue-9);
    --color-primary-10: var(--arcoblue-10);
    --color-primary: var(--color-primary-6);
    --color-primary-hover: var(--color-primary-5);
    --color-primary-active: var(--color-primary-7);
    --color-primary-light-1: var(--color-primary-1);
    --color-primary-light-2: var(--color-primary-2);
    --primary-color: var(--color-primary);

    /* 功能色 */
    --color-success: #00B42A;
    --color-success-bg: #E8FFEA;
    --color-success-border: #AFF0B5;
    --color-success-hover: #009A29;

    --color-warning: #FF7D00;
    --color-warning-bg: #FFF7E8;
    --color-warning-border: #FFE4BA;
    --color-warning-hover: #D25F00;

    --color-danger: #F53F3F;
    --color-danger-bg: #FFECE8;
    --color-danger-border: #FDCDC5;
    --color-danger-hover: #CB2634;

    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --danger-color: var(--color-danger);

    /* 文字色 */
    --color-text-1: #1D2129;
    --color-text-2: #4E5969;
    --color-text-3: #86909C;
    --color-text-4: #C9CDD4;
    --text-primary: var(--color-text-1);
    --text-secondary: var(--color-text-2);
    --text-muted: var(--color-text-3);

    /* 背景色 */
    --color-bg-1: #FFFFFF;
    --color-bg-2: #F7F8FA;
    --color-bg-3: #F2F3F5;
    --color-bg-4: #E5E6EB;
    --color-fill-1: #F7F8FA;
    --color-fill-2: #F2F3F5;
    --color-fill-3: #E5E6EB;
    --color-fill-4: #C9CDD4;

    /* 边框色 */
    --color-border-1: #F2F3F5;
    --color-border-2: #E5E6EB;
    --color-border-3: #C9CDD4;
    --color-border-4: #86909C;

    /* 组件专用颜色 - 由上方变量派生，确保暗色模式自动适配 */
    --header-bg: var(--color-bg-1);
    --header-border: var(--color-border-2);
    --sidebar-bg: var(--color-bg-1);
    --sidebar-border: var(--color-border-2);
    --sidebar-hover: var(--color-fill-1);
    --sidebar-active-bg: var(--color-fill-1);
    --main-bg: var(--color-bg-3);
    --card-bg: var(--color-bg-1);
    --card-border: var(--color-border-2);
    --card-header-bg: var(--color-fill-2);
    --modal-bg: var(--color-bg-1);
    --modal-overlay: rgba(29, 33, 41, .60);
    --dropdown-bg: var(--color-bg-1);
    --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    --toast-bg: var(--color-bg-1);
    --input-bg: var(--color-bg-1);
    --input-border: var(--color-border-2);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
    --table-header-bg: var(--color-fill-2);
    --table-row-hover: var(--color-fill-1);
    --tab-bg: var(--color-bg-1);
    --tab-border: rgba(22, 93, 255, 0.10);
    --tab-active-border: rgba(22, 93, 255, 0.22);
    --skeleton-bg: linear-gradient(90deg, var(--color-fill-2) 25%, var(--color-fill-1) 50%, var(--color-fill-2) 75%);
    --watermark-color: rgba(29, 33, 41, 0.06);

    /* 间距系统 (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* 圆角 */
    --border-radius-none: 0;
    --border-radius-small: 2px;
    --border-radius-medium: 4px;
    --border-radius-large: 8px;
    --border-radius-xl: 12px;
    --border-radius-pill: 999px;

    /* 阴影 */
    --shadow-1: 0 2px 5px rgba(0, 0, 0, .10);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, .12);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, .16);
    --shadow-4: 0 12px 32px rgba(0, 0, 0, .20);

    /* 动画 */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* 尺寸 */
    --header-height: 60px;
    --content-tabs-height: 46px;
    --sidebar-width: 104px;
    --sidebar-collapsed-width: 56px;
    --control-height: 32px;
    --control-height-lg: 40px;
    --table-row-height: 40px;

    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-toast: 9999;
}

/* ========== Dark Mode ========== */
html[data-theme="dark"],
.dark-theme {
    color-scheme: dark;

    --color-text-1: #f7f8fa;
    --color-text-2: #c9cdd4;
    --color-text-3: #86909c;
    --color-text-4: #6b7785;

    --color-bg-1: #17171a;
    --color-bg-2: #232324;
    --color-bg-3: #2a2a2b;
    --color-bg-4: #313132;
    --color-fill-1: #232324;
    --color-fill-2: #2a2a2b;
    --color-fill-3: #373739;
    --color-fill-4: #484849;

    --color-border-1: #2e2e30;
    --color-border-2: #3f3f46;
    --color-border-3: #4e4e56;
    --color-border-4: #5e5e66;

    /* 品牌色暗色适配 */
    --color-primary: #4080FF;
    --color-primary-hover: #6AA1FF;
    --color-primary-active: #165DFF;
    --color-primary-light-1: rgba(64, 128, 255, .18);
    --color-primary-light-2: rgba(64, 128, 255, .28);

    /* 功能色暗色适配 */
    --color-success-bg: rgba(0, 180, 42, 0.15);
    --color-success-border: rgba(0, 180, 42, 0.25);
    --color-warning-bg: rgba(255, 125, 0, 0.15);
    --color-warning-border: rgba(255, 125, 0, 0.25);
    --color-danger-bg: rgba(245, 63, 63, 0.15);
    --color-danger-border: rgba(245, 63, 63, 0.25);

    /* 组件暗色适配 - 全部自动跟随上方基础变量 */
    --header-bg: var(--color-bg-2);
    --header-border: var(--color-border-1);
    --sidebar-bg: var(--color-bg-2);
    --sidebar-border: var(--color-border-1);
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(64, 128, 255, 0.12);
    --main-bg: var(--color-bg-1);
    --card-bg: var(--color-bg-2);
    --card-border: var(--color-border-1);
    --card-header-bg: var(--color-bg-3);
    --modal-bg: var(--color-bg-2);
    --modal-overlay: rgba(0, 0, 0, 0.70);
    --dropdown-bg: var(--color-bg-2);
    --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    --toast-bg: var(--color-bg-2);
    --input-bg: var(--color-bg-3);
    --input-border: var(--color-border-2);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: 0 0 0 3px rgba(64, 128, 255, 0.15);
    --table-header-bg: var(--color-bg-3);
    --table-row-hover: var(--color-bg-3);
    --tab-bg: var(--color-bg-2);
    --tab-border: var(--color-border-2);
    --tab-active-border: var(--color-primary);
    --skeleton-bg: linear-gradient(90deg, var(--color-bg-3) 25%, var(--color-bg-4) 50%, var(--color-bg-3) 75%);
    --watermark-color: rgba(247, 248, 250, 0.04);
}