/**
 * 公共CSS变量定义 - 腾讯云/TDesign设计规范
 * 
 * 本文件定义了项目中所有统一的颜色变量和设计Token
 * 所有CSS文件应导入此文件以保持样式一致性
 * 
 * @version 1.0.0
 * @last-update 2026-02-14
 */

:root {
    /* ============================================
     * 主色调 - 腾讯云蓝
     * ============================================ */
    --primary-color: #006EFF;
    --primary-hover: #005AD4;
    --primary-active: #004AB3;
    --primary-light: #E8F3FF;
    --primary-lighter: #F2F7FF;
    --primary-dark: #003CAB;
    --primary-gradient: linear-gradient(135deg, #006EFF 0%, #005AD4 100%);
    
    /* ============================================
     * 功能色
     * ============================================ */
    /* 成功色 */
    --success-color: #00A870;
    --success-hover: #008858;
    --success-active: #006C45;
    --success-light: #E8F8F2;
    --success-lighter: #F2FAF7;
    
    /* 警告色 */
    --warning-color: #ED7B2F;
    --warning-hover: #D66319;
    --warning-active: #B84D0F;
    --warning-light: #FFF4E8;
    --warning-lighter: #FFF7ED;
    
    /* 错误色 */
    --error-color: #E34D59;
    --error-hover: #C9353F;
    --error-active: #B01F28;
    --error-light: #FDECEE;
    --error-lighter: #FEF2F3;
    
    /* 信息色 */
    --info-color: #0052D9;
    --info-hover: #003CAB;
    --info-light: #E8F3FF;
    
    /* ============================================
     * 文本色
     * ============================================ */
    --text-primary: #1B212E;
    --text-secondary: #5E6C84;
    --text-muted: #8B9BB0;
    --text-light: #B5C0D0;
    --text-white: #FFFFFF;
    --text-color: #1B212E;  /* 兼容旧变量名 */
    --text-dark: #1B212E;
    
    /* ============================================
     * 背景色
     * ============================================ */
    --bg-white: #FFFFFF;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-tertiary: #F0F2F5;
    --bg-gray-50: #F5F7FA;
    --bg-gray-100: #EBEEF5;
    --bg-gray-200: #DCDFE6;
    --bg-gray-300: #C0C4CC;
    --bg-gray-400: #909399;
    --bg-gray-500: #606266;
    
    /* ============================================
     * 边框色
     * ============================================ */
    --border-color: #DCDFE6;
    --border-light: #E8E8E8;
    --border-lighter: #F0F0F0;
    --border-dark: #C0C4CC;
    --border-hover: #0052D9;
    
    /* ============================================
     * 布局尺寸
     * ============================================ */
    --header-height: 64px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 64px;
    --page-padding: 24px;
    --page-gap: 24px;
    
    /* ============================================
     * 圆角
     * ============================================ */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-default: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* ============================================
     * 阴影
     * ============================================ */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);
    --shadow-hover: 0 12px 32px rgba(0, 110, 255, 0.15);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.1);
    
    /* ============================================
     * 字体
     * ============================================ */
    --font-size-xs: 12px;
    --font-size-small: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-title: 20px;
    --font-size-section-title: 16px;
    --font-size-table: 14px;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ============================================
     * 过渡动画
     * ============================================ */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ============================================
     * 服务器状态颜色
     * ============================================ */
    --status-running: #00B42A;
    --status-stopped: #86909C;
    --status-pending: #FF7D00;
    --status-expired: #F53F3F;
    --status-error: #F53F3F;
    
    /* ============================================
     * 监控阈值颜色
     * ============================================ */
    --threshold-normal: #00B42A;
    --threshold-warning: #FF7D00;
    --threshold-danger: #F53F3F;
    
    /* ============================================
     * 品牌色（腾讯云风格）
     * ============================================ */
    --brand-color: #006EFF;
    --brand-hover: #4080FF;
    --brand-active: #0052D9;
    --brand-light: #E8F3FF;
    
    /* ============================================
     * 头部导航变量
     * ============================================ */
    --header-bg: rgba(27, 33, 46, 0.85);
    --header-bg-scrolled: rgba(27, 33, 46, 0.95);
    --header-text: #FFFFFF;
    --header-blur: 12px;
    
    /* ============================================
     * 页面描述颜色
     * ============================================ */
    --page-desc-color: #5E6C84;
    
    /* ============================================
     * 其他常用颜色
     * ============================================ */
    --white: #FFFFFF;
    --black: #000000;
    --secondary-color: #F5F7FA;
    --section-padding: 80px 0;

    /* ============================================
     * 深色背景
     * ============================================ */
    --bg-dark: #1B212E;
    --bg-footer: #000A1E;
    --bg-gradient-dark: linear-gradient(135deg, #1B212E 0%, #0A0F1A 100%);

    /* ============================================
     * 促销/价格色
     * ============================================ */
    --price-color: #FF3E00;
    --price-original: #8B9BB0;
    --promo-gradient: linear-gradient(135deg, #FF6B35 0%, #FF3E00 100%);

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

    /* ============================================
     * 容器宽度
     * ============================================ */
    --container-sm: 960px;
    --container-md: 1080px;
    --container-lg: 1240px;
    --container-xl: 1400px;
}

/* ============================================
 * 暗色主题支持（预留）
 * ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* 暗色主题变量可在需要时启用 */
        /* --bg-primary: #1B212E; */
        /* --bg-secondary: #252D3D; */
        /* --text-primary: #FFFFFF; */
        /* --text-secondary: #B5C0D0; */
        /* --border-color: #3A4455; */
    }
}