/* ========================================
   飞狐商旅网 - 统一设计规范变量
   ======================================== */

:root {
    /* ========== 品牌色 ========== */
    --primary-color: #0086F6;
    --primary-light: #e6f7ff;
    --primary-hover: #0066E6;
    --primary-dark: #0050b3;
    --primary-shadow: rgba(0, 134, 246, 0.15);

    --brand-accent: #FF9A03; /* 品牌橙色 */
    --brand-accent-hover: #FF8A00;
    
    /* ========== 辅助色（价格、高亮） ========== */
    --secondary-color: #FF9A03;

    /* ========== 功能色 ========== */
    --success-color: #52c41a;
    --success-light: #f6ffed;
    --warning-color: #faad14;
    --warning-light: #fffbe6;
    --error-color: #ff4d4f;
    --error-light: #fff1f0;
    --info-color: #1890ff;
    --info-light: #e6f7ff;

    /* ========== 中性色 ========== */
    --text-primary: #333;
    --text-secondary: #666;
    --text-tertiary: #999;
    --text-placeholder: #ccc;
    --text-disabled: #bbb;

    /* ========== 边框色 ========== */
    --border-color: #ddd;
    --border-color-light: #eee;
    --border-color-lighter: #f0f0f0;

    /* ========== 背景色 ========== */
    --bg-white: #fff;
    --bg-gray: #f5f5f5;
    --bg-gray-light: #f8f8f8;
    --bg-gray-lighter: #fafafa;

    /* ========== 圆角规范 ========== */
    --radius-xs: 3px;      /* 极小圆角（标签） */
    --radius-sm: 4px;      /* 小圆角（按钮、标签） */
    --radius-md: 6px;      /* 中圆角（小卡片） */
    --radius-lg: 8px;      /* 大圆角（主要卡片、输入框） */
    --radius-xl: 12px;     /* 超大圆角（容器、面板） */
    --radius-2xl: 16px;    /* 最大圆角（弹窗） */
    --radius-round: 50%;   /* 圆形（头像、图标按钮） */

    /* ========== 阴影规范 ========== */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

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

    /* ========== 过渡动画 ========== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========== 字体规范 ========== */
    --font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;

    /* ========== 行高规范 ========== */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.8;

    /* ========== Z-index 层级 ========== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 800;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-popover: 1050;
    --z-tooltip: 1100;

    /* ========== 价格颜色（统一使用品牌色） ========== */
    --price-color: var(--secondary-color);
    --price-highlight: var(--primary-dark);

    /* ========== 特殊标签颜色 ========== */
    --tag-special-bg: #ff4d4f;
    --tag-special-color: #fff;
    --tag-vip-bg: #722ed1;
    --tag-vip-color: #fff;
    --tag-default-bg: #f0f0f0;
    --tag-default-color: #555;
}

/* ========== 通用工具类 ========== */
.primary-color { color: var(--primary-color); }
.success-color { color: var(--success-color); }
.warning-color { color: var(--warning-color); }
.error-color { color: var(--error-color); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.border-radius-sm { border-radius: var(--radius-sm); }
.border-radius-md { border-radius: var(--radius-md); }
.border-radius-lg { border-radius: var(--radius-lg); }
.border-radius-xl { border-radius: var(--radius-xl); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.transition-base { transition: var(--transition-base); }
.transition-smooth { transition: var(--transition-smooth); }