:root {
    /* 主题色 */
    --stellar-primary: #1BCDFC;
    --stellar-primary-light: #4DD9FF;
    --stellar-primary-dark: #00B8E6;
    
    /* 背景色 */
    --stellar-bg: #ffffff;
    --stellar-bg-secondary: #f8f9fa;
    --stellar-bg-tertiary: #e9ecef;
    
    /* 文字颜色 */
    --stellar-text: #2c3e50;
    --stellar-text-secondary: #6c757d;
    --stellar-text-tertiary: #adb5bd;
    
    /* 边框颜色 */
    --stellar-border: #dee2e6;
    --stellar-border-light: #e9ecef;
    
    /* 链接颜色 */
    --stellar-link: var(--stellar-primary);
    --stellar-link-hover: var(--stellar-primary-dark);
    
    /* 阴影 */
    --stellar-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --stellar-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --stellar-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    
    /* 圆角 */
    --stellar-radius-sm: 4px;
    --stellar-radius-md: 8px;
    --stellar-radius-lg: 12px;
    --stellar-radius-xl: 16px;
    
    /* 间距 */
    --stellar-spacing-xs: 4px;
    --stellar-spacing-sm: 8px;
    --stellar-spacing-md: 16px;
    --stellar-spacing-lg: 24px;
    --stellar-spacing-xl: 32px;
    --stellar-spacing-2xl: 48px;
    
    /* 字体 */
    --stellar-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --stellar-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* 字体大小 */
    --stellar-font-xs: 0.75rem;
    --stellar-font-sm: 0.875rem;
    --stellar-font-base: 1rem;
    --stellar-font-lg: 1.125rem;
    --stellar-font-xl: 1.25rem;
    --stellar-font-2xl: 1.5rem;
    --stellar-font-3xl: 1.875rem;
    --stellar-font-4xl: 2.25rem;
    
    /* 过渡 */
    --stellar-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --stellar-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 容器宽度 */
    --stellar-container-width: 1200px;
    --stellar-content-width: 800px;
    
    /* 头部高度 */
    --stellar-header-height: 64px;
}

/* 深色模式 */
[data-theme="dark"],
.theme-dark {
    /* 背景色 */
    --stellar-bg: #1a1a1a;
    --stellar-bg-secondary: #242424;
    --stellar-bg-tertiary: #2e2e2e;
    
    /* 文字颜色 */
    --stellar-text: #e0e0e0;
    --stellar-text-secondary: #a0a0a0;
    --stellar-text-tertiary: #707070;
    
    /* 边框颜色 */
    --stellar-border: #3a3a3a;
    --stellar-border-light: #2e2e2e;
    
    /* 阴影 */
    --stellar-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --stellar-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --stellar-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* 自动跟随系统 */
@media (prefers-color-scheme: dark) {
    .theme-auto {
        /* 背景色 */
        --stellar-bg: #1a1a1a;
        --stellar-bg-secondary: #242424;
        --stellar-bg-tertiary: #2e2e2e;
        
        /* 文字颜色 */
        --stellar-text: #e0e0e0;
        --stellar-text-secondary: #a0a0a0;
        --stellar-text-tertiary: #707070;
        
        /* 边框颜色 */
        --stellar-border: #3a3a3a;
        --stellar-border-light: #2e2e2e;
        
        /* 阴影 */
        --stellar-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --stellar-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
        --stellar-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
}

/* 响应式断点 */
@media (max-width: 1200px) {
    :root {
        --stellar-container-width: 960px;
    }
}

@media (max-width: 992px) {
    :root {
        --stellar-container-width: 720px;
        --stellar-header-height: 56px;
    }
}

@media (max-width: 768px) {
    :root {
        --stellar-container-width: 540px;
        --stellar-font-base: 0.9375rem;
    }
}

@media (max-width: 576px) {
    :root {
        --stellar-container-width: 100%;
        --stellar-spacing-lg: 16px;
        --stellar-spacing-xl: 24px;
        --stellar-spacing-2xl: 32px;
    }
}