/* UI3主题 - 清新蓝色主题（tok工具箱风格） */
/* 基于原始tok工具箱的实际配色 */

:root {
  /* 基础颜色变量 - 清新蓝色主题 */
  --ui-primary-color: #3399FF;           /* 主色调 - 清新蓝色 */
  --ui-primary-color-light: #66B3FF;     /* 主色调浅色 */
  --ui-primary-color-dark: #0066CC;      /* 主色调深色 */
  
  /* 背景颜色 - 清新浅蓝背景 */
  --ui-bg-color-primary: #F8FBFF;        /* 主背景色 - 浅蓝白色 */
  --ui-bg-color-secondary: #FFFFFF;      /* 次要背景色 */
  --ui-bg-color-card: #FFFFFF;           /* 卡片背景色 */
  
  /* 文字颜色 - 深色文字配浅蓝背景 */
  --ui-text-color-primary: #2E2E2E;      /* 主要文字 - 深灰色 */
  --ui-text-color-secondary: #616161;    /* 次要文字 - 中深灰 */
  --ui-text-color-muted: #9E9E9E;        /* 弱化文字 */
  --ui-text-color-white: #FFFFFF;        /* 白色文字 */
  --ui-text-color-section: #424242;      /* 章节文字 */
  
  /* TabBar配置 - 蓝色主题 */
  --ui-tabbar-bg-color: #FFFFFF;         /* TabBar背景色 - 白色 */
  --ui-tabbar-color: #9E9E9E;           /* TabBar未选中文字颜色 */
  --ui-tabbar-selected-color: #3399FF;   /* TabBar选中颜色 - 蓝色 */
  --ui-tabbar-border-color: #F8FBFF;     /* TabBar边框颜色 */
  
  /* 导航栏配置 - 蓝色主题 */
  --ui-navbar-bg-color: #F8FBFF;         /* 导航栏背景色 - 浅蓝色 */
  --ui-navbar-text-color: #2E2E2E;       /* 导航栏文字颜色 - 深灰色 */
  --ui-navbar-text-style: black;         /* 导航栏文字样式 - 浅色主题用黑色 */
  --ui-navbar-button-color: #3399FF;     /* 导航栏按钮颜色 - 蓝色 */
  
  /* 边框和阴影 - 蓝色调 */
  --ui-border-color: rgba(51, 153, 255, 0.2);      /* 边框颜色 - 蓝色半透明 */
  --ui-shadow-color: rgba(51, 153, 255, 0.1);      /* 阴影颜色 - 蓝色调阴影 */
  --ui-shadow: 0rpx 2rpx 4rpx 0rpx rgba(51, 153, 255, 0.1);  /* 标准阴影 */
  
  /* 状态颜色 - 蓝色主题适配 */
  --ui-success-color: #4CAF50;           /* 成功色 - 保持绿色 */
  --ui-warning-color: #FF9800;           /* 警告色 */
  --ui-error-color: #F44336;             /* 错误色 */
  --ui-info-color: #3399FF;              /* 信息色 - 使用主题蓝色 */
  --ui-search-color: #3399FF;            /* 搜索色 - 使用主题蓝色 */
  
  /* 渐变色 - 蓝色系 */
  --ui-gradient-primary: linear-gradient(135deg, #3399FF 0%, #66B3FF 100%);
  --ui-gradient-secondary: linear-gradient(135deg, #F2F3F8 0%, #FFFFFF 100%);
  
  /* 阴影渐变 - 用于覆盖层效果（浅色主题使用CSS渐变） */
  --ui-shadow-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* 应用主题变量到实际元素 */
body {
    background-color: var(--ui-bg-color-primary);
    color: var(--ui-text-color-primary);
}

.page-header, .page-header-fixed {
    background-color: var(--ui-navbar-bg-color);
}

/* 按钮样式 - 强制白色文字 */
.btn-primary,
.btn.btn-primary,
.btn-download,
.download-links .item,
.download-links a,
.download-group a,
a.item,
.home-introduce .btn-download,
.home-introduce-main .download-links .item,
.home-introduce-main .download-links a {
    background-color: var(--ui-primary-color) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-download:hover,
.download-links .item:hover,
.download-links a:hover,
.home-introduce-main .download-links .item:hover {
    background-color: var(--ui-primary-color-dark) !important;
    color: #fff !important;
}

.header-logo {
    color: var(--ui-navbar-text-color);
}

/* Slogan样式修复 */
.slogan,
.home-introduce .slogan {
    color: var(--ui-primary-color) !important;
}

.explain {
    color: var(--ui-text-color-secondary);
}

/* Home Feature区域样式修复 */
.home-feature-list .title,
.home-feature-list-pc .title,
.home-feature-list > li.active .title {
    color: var(--ui-primary-color) !important;
}

.home-feature-list .explain,
.home-feature-list-pc .explain {
    color: var(--ui-text-color-secondary);
}

.home-feature-list-pc li.active {
    background-color: var(--ui-primary-color) !important;
}

.home-feature-list-pc li.active .explain, 
.home-feature-list-pc li.active .title {
    color: #fff !important;
}

/* 协议链接样式修复 - 排除按钮链接 */
a:not(.btn-download):not(.btn-primary):not(.item),
a:not(.btn-download):not(.btn-primary):not(.item):link,
a:not(.btn-download):not(.btn-primary):not(.item):visited {
    color: var(--ui-primary-color) !important;
    text-decoration: none;
}

a:not(.btn-download):not(.btn-primary):not(.item):hover,
a:not(.btn-download):not(.btn-primary):not(.item):active {
    color: var(--ui-primary-color-dark) !important;
}

.home-section {
    background-color: var(--ui-bg-color-secondary);
}

/* TabBar样式（如果存在） */
.tabbar {
    background-color: var(--ui-tabbar-bg-color);
    border-color: var(--ui-tabbar-border-color);
}

.tabbar .item {
    color: var(--ui-tabbar-color);
}

.tabbar .item.active {
    color: var(--ui-tabbar-selected-color);
}

/* 导航栏按钮 */
.btn-header-menu {
    color: var(--ui-navbar-button-color);
}

/* 卡片样式 */
.card, .interface {
    background-color: var(--ui-bg-color-card);
    box-shadow: var(--ui-shadow);
}

/* phone-preview外层容器 - 完全透明 */
.home-introduce .phone-preview,
.phone-preview {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* hero-logo图片样式 - 应用图标效果 */
.hero-logo {
    border-radius: 22% !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 0.3rem !important;
    margin: 0.4rem !important;
    width: calc(100% - 0.8rem) !important;
    height: calc(100% - 0.8rem) !important;
    object-fit: cover !important;
}