/**
 * ATACAJUNTO Admin - CSS 变量
 * 阿里云风格 + 深色模式支持
 */

:root {
    /* ============================
       主色调 - 阿里云蓝
       ============================ */
    --color-primary: #1890ff;
    --color-primary-light: #40a9ff;
    --color-primary-lighter: #e6f7ff;
    --color-primary-dark: #096dd9;
    --color-primary-darker: #0050b3;
    
    /* ============================
       功能色
       ============================ */
    --color-success: #52c41a;
    --color-success-light: #95de64;
    --color-success-bg: #f6ffed;
    
    --color-warning: #faad14;
    --color-warning-light: #ffc53d;
    --color-warning-bg: #fffbe6;
    
    --color-danger: #ff4d4f;
    --color-danger-light: #ff7875;
    --color-danger-bg: #fff2f0;
    
    --color-info: #1890ff;
    --color-info-bg: #e6f7ff;
    
    /* ============================
       中性色 - 亮色模式
       ============================ */
    --color-text-primary: #262626;
    --color-text-secondary: #595959;
    --color-text-tertiary: #8c8c8c;
    --color-text-disabled: #bfbfbf;
    --color-text-placeholder: #bfbfbf;
    
    --color-border: #d9d9d9;
    --color-border-light: #f0f0f0;
    --color-divider: #f0f0f0;
    
    --color-bg-layout: #f0f2f5;
    --color-bg-container: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-spotlight: #f5f5f5;
    --color-bg-mask: rgba(0, 0, 0, 0.45);
    
    /* ============================
       侧边栏 - 深蓝色
       ============================ */
    --sidebar-width: 200px;
    --sidebar-width-collapsed: 60px;
    --sidebar-bg: #001529;
    --sidebar-bg-light: #000c17;
    --sidebar-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-active: #ffffff;
    --sidebar-item-bg-hover: rgba(255, 255, 255, 0.08);
    --sidebar-item-bg-active: var(--color-primary);
    
    /* ============================
       顶部栏
       ============================ */
    --header-height: 64px;
    --header-bg: #ffffff;
    --header-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    
    /* ============================
       间距
       ============================ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* ============================
       圆角
       ============================ */
    --border-radius-sm: 2px;
    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    
    /* ============================
       字体
       ============================ */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-heading: 30px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height: 1.5715;
    
    /* ============================
       阴影
       ============================ */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
    --shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
    
    /* ============================
       动画
       ============================ */
    --transition-fast: 0.1s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ============================
       层级
       ============================ */
    --z-dropdown: 1050;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ============================
   深色模式
   ============================ */
[data-theme="dark"] {
    /* 主色调 - 稍微调亮 */
    --color-primary: #177ddc;
    --color-primary-light: #3c9ae8;
    --color-primary-lighter: #111d2c;
    --color-primary-dark: #1765ad;
    
    /* 功能色 */
    --color-success: #49aa19;
    --color-success-bg: #162312;
    
    --color-warning: #d89614;
    --color-warning-bg: #2b2111;
    
    --color-danger: #d32029;
    --color-danger-bg: #2a1215;
    
    --color-info: #177ddc;
    --color-info-bg: #111d2c;
    
    /* 中性色 - 深色模式 */
    --color-text-primary: rgba(255, 255, 255, 0.85);
    --color-text-secondary: rgba(255, 255, 255, 0.65);
    --color-text-tertiary: rgba(255, 255, 255, 0.45);
    --color-text-disabled: rgba(255, 255, 255, 0.25);
    --color-text-placeholder: rgba(255, 255, 255, 0.25);
    
    --color-border: #434343;
    --color-border-light: #303030;
    --color-divider: #303030;
    
    --color-bg-layout: #000000;
    --color-bg-container: #141414;
    --color-bg-elevated: #1f1f1f;
    --color-bg-spotlight: #262626;
    --color-bg-mask: rgba(0, 0, 0, 0.65);
    
    /* 侧边栏 - 深色模式 */
    --sidebar-bg: #000000;
    --sidebar-bg-light: #141414;
    
    /* 顶部栏 - 深色模式 */
    --header-bg: #141414;
    --header-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    
    /* 阴影 - 深色模式 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 48px 16px rgba(0, 0, 0, 0.4);
}

/* ============================
   响应式断点
   ============================ */
/* 
   xs: < 576px    (手机竖屏)
   sm: 576-768px  (手机横屏/小平板)
   md: 768-992px  (平板)
   lg: 992-1200px (小桌面)
   xl: > 1200px   (大桌面)
*/