/**
 * FOF交易平台 - CSS变量规范
 * 统一颜色、字体、间距等设计规范
 * 适用于所有前端页面
 */

:root {
  /* ========== 背景色系 ========== */
  --bg-primary: #000;                    /* 主背景色 - 纯黑 */
  --bg-secondary: #181a1b;               /* 卡片背景色 - 深灰黑 */
  --bg-tertiary: #232323;                /* 次级背景色 - 中灰 */
  --bg-quaternary: #333;                 /* 边框分割线色 - 浅灰 */
  
  /* ========== 文本颜色 ========== */
  --text-primary: #fff;                  /* 主文本色 - 白色 */
  --text-secondary: #888;                /* 次文本色 - 灰色 */
  --text-tertiary: rgba(255, 255, 255, 0.8);   /* 半透明白色 */
  --text-quaternary: rgba(255, 255, 255, 0.6); /* 更淡白色 */
  --text-disabled: rgba(255, 255, 255, 0.4);   /* 禁用文字 */
  
  /* ========== 主题色彩 ========== */
  --color-success: #00c17c;              /* 主题绿色 - 涨幅/按钮 */
  --color-primary: #00c1f6;              /* 主题蓝色 - 链接/激活 */
  --color-positive: #4caf50;             /* 涨幅绿色 */
  --color-negative: #f44336;             /* 跌幅红色 */
  --color-danger: #f56565;               /* 次级红色 */
  --color-warning: #ff9800;              /* 警告橙色 */
  
  /* ========== 排行榜渐变色 ========== */
  --gradient-rank1: linear-gradient(135deg, #9c27b0, #673ab7);  /* 第一名紫色 */
  --gradient-rank2: linear-gradient(135deg, #3f51b5, #2196f3);  /* 第二名蓝色 */
  --gradient-rank3: linear-gradient(135deg, #ff9800, #ff5722);  /* 第三名橙色 */
  --gradient-gold: linear-gradient(135deg, #ffd700, #ffa000);   /* 金牌色 */
  --gradient-silver: linear-gradient(135deg, #c0c0c0, #9e9e9e); /* 银牌色 */
  --gradient-bronze: linear-gradient(135deg, #cd7f32, #8d6e63); /* 铜牌色 */
  
  /* ========== 透明度层级 ========== */
  --opacity-hover: rgba(255, 255, 255, 0.05);     /* 悬停背景 */
  --opacity-border: rgba(255, 255, 255, 0.1);     /* 边框透明度 */
  --opacity-divider: rgba(255, 255, 255, 0.08);   /* 分割线透明度 */
  --opacity-backdrop: rgba(255, 255, 255, 0.03);  /* 背景透明度 */
  --opacity-active: rgba(0, 193, 246, 0.1);       /* 激活状态背景 */
  
  /* ========== 字体规范 ========== */
  --font-family: "Inter", Arial, sans-serif;
  --font-size-hero: 32px;                /* 主卡片数值 */
  --font-size-title: 24px;               /* 大标题 */
  --font-size-heading: 18px;             /* 区域标题 */
  --font-size-subheading: 16px;          /* 卡片标题 */
  --font-size-body: 14px;                /* 正文 */
  --font-size-small: 13px;               /* 次要信息 */
  --font-size-caption: 12px;             /* 说明文字 */
  --font-size-micro: 11px;               /* 微小文字 */
  
  /* ========== 字重规范 ========== */
  --font-weight-light: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;
  
  /* ========== 圆角规范 ========== */
  --radius-small: 6px;                   /* 小圆角 */
  --radius-medium: 8px;                  /* 中圆角 */
  --radius-large: 12px;                  /* 大圆角 */
  --radius-xlarge: 16px;                 /* 超大圆角 */
  --radius-full: 50%;                    /* 完全圆形 */
  
  /* ========== 间距规范 ========== */
  --spacing-xs: 4px;                     /* 超小间距 */
  --spacing-sm: 8px;                     /* 小间距 */
  --spacing-md: 12px;                    /* 中间距 */
  --spacing-lg: 16px;                    /* 大间距 */
  --spacing-xl: 20px;                    /* 超大间距 */
  --spacing-2xl: 24px;                   /* 2倍大间距 */
  --spacing-3xl: 32px;                   /* 3倍大间距 */
  
  /* ========== 阴影规范 ========== */
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35);
  
  /* ========== 过渡动画 ========== */
  --transition-fast: 0.2s ease;          /* 快速过渡 */
  --transition-normal: 0.3s ease;        /* 标准过渡 */
  --transition-slow: 0.5s ease;          /* 慢速过渡 */
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ========== 布局规范 ========== */
  --container-max-width: 480px;          /* 移动端最大宽度 */
  --content-width: 90%;                  /* 内容区域宽度 */
  --header-height: 36px;                 /* 顶部导航高度 */
  --bottom-nav-height: 48px;             /* 底部导航高度 */
  --touch-target-min: 44px;              /* 最小触摸目标 */
  
  /* ========== 图表颜色 ========== */
  --chart-positive: #48bb78;             /* K线上涨色 */
  --chart-negative: #f56565;             /* K线下跌色 */
  --chart-positive-fill: rgba(72, 187, 120, 0.3);   /* 上涨填充 */
  --chart-negative-fill: rgba(245, 101, 101, 0.3);  /* 下跌填充 */
  --chart-grid: rgba(255, 255, 255, 0.1);           /* 网格线 */
  --chart-axis: rgba(255, 255, 255, 0.2);           /* 坐标轴 */
  
  /* ========== 热力图颜色 ========== */
  --heatmap-strong-positive: #1b6b3a;    /* 强涨色 */
  --heatmap-weak-positive: #22c55e;      /* 弱涨色 */
  --heatmap-strong-negative: #b13a3a;    /* 强跌色 */
  --heatmap-weak-negative: #ef4444;      /* 弱跌色 */
  
  /* ========== 特殊组件 ========== */
  --ranking-badge-size: 32px;            /* 排名徽章尺寸 */
  --ranking-badge-border: 3px solid #fff; /* 排名徽章边框 */
  --avatar-border: 2px solid rgba(255, 255, 255, 0.2); /* 头像边框 */
  
  /* ========== 图标规范 ========== */
  --icon-color-primary: #fff;             /* 主要图标颜色 */
  --icon-color-active: #00c17c;           /* 激活图标颜色 */
  --icon-color-inactive: #666;            /* 非激活图标颜色 */
  --icon-color-hover: #f0f0f0;            /* 悬停图标颜色 */
  --icon-color-disabled: rgba(255, 255, 255, 0.4); /* 禁用图标颜色 */
  --icon-size-small: 16px;                /* 小图标 */
  --icon-size-medium: 20px;               /* 中图标 */
  --icon-size-large: 24px;                /* 大图标 */
  --icon-size-xlarge: 32px;               /* 超大图标 */
  
  /* 导航图标专用颜色 */
  --nav-icon-default: #888;               /* 默认导航图标 */
  --nav-icon-active: #00c17c;             /* 激活导航图标 */
  --nav-icon-hover: #fff;                 /* 悬停导航图标 */
  
  /* 功能图标专用颜色 */
  --function-icon-color: #fff;            /* 功能图标颜色 */
  --function-icon-hover: #f0f0f0;         /* 功能图标悬停 */
  
  /* 状态图标专用颜色 */
  --status-success-icon: #00c17c;         /* 成功状态图标 */
  --status-warning-icon: #ff9500;         /* 警告状态图标 */
  --status-error-icon: #f44336;           /* 错误状态图标 */
  --status-info-icon: #00c1f6;            /* 信息状态图标 */
  
  /* 按钮图标专用颜色 */
  --btn-icon-primary: #fff;               /* 主按钮图标 */
  --btn-icon-secondary: var(--text-secondary); /* 次按钮图标 */
  --btn-icon-success: #fff;               /* 成功按钮图标 */
  --btn-icon-warning: var(--text-primary); /* 警告按钮图标 */
  --btn-icon-danger: #fff;                /* 危险按钮图标 */
  
  /* 侧边栏图标专用颜色 */
  --sidebar-icon-color: #666;             /* 侧边栏图标 */
  --sidebar-icon-active: var(--color-primary); /* 侧边栏激活图标 */
  
  /* ========== Z-Index层级 ========== */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
}

/* ========== 响应式断点 ========== */
@media (max-width: 480px) {
  :root {
    --font-size-hero: 28px;
    --font-size-title: 20px;
    --font-size-heading: 16px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
  }
}

@media (max-width: 375px) {
  :root {
    --font-size-hero: 26px;
    --font-size-title: 18px;
    --ranking-badge-size: 28px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
  }
}

@media (max-width: 320px) {
  :root {
    --font-size-hero: 24px;
    --font-size-title: 16px;
    --ranking-badge-size: 26px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
  }
}

/* ========== 实用类 ========== */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

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

.radius-sm { border-radius: var(--radius-small); }
.radius-md { border-radius: var(--radius-medium); }
.radius-lg { border-radius: var(--radius-large); }
.radius-xl { border-radius: var(--radius-xlarge); }

.transition-fast { transition: var(--transition-fast); }
.transition-normal { transition: var(--transition-normal); }

/* ========== 图标样式强制规范 ========== */
/* 全局Font Awesome图标样式重置 - 防止第三方库覆盖 */
.fas, .far, .fab, .fal, .fad {
  color: inherit !important;
}

/* 针对特定第三方库的强制覆盖 */
.layui-icon, .layui-btn .fas {
  color: inherit !important;
}

/* 功能图标强制白色 */
.function-icon {
  color: var(--function-icon-color) !important;
}

.function-icon i {
  color: var(--function-icon-color) !important;
  font-size: inherit !important;
}

.function-tab:hover .function-icon,
.function-tab:hover .function-icon i {
  color: var(--function-icon-hover) !important;
  transition: color 0.3s ease !important;
}

/* 导航图标颜色继承 */
.nav-icon i {
  color: inherit !important;
  font-size: inherit !important;
}

.nav-item .nav-icon i {
  color: var(--nav-icon-default) !important;
}

.nav-item.active .nav-icon i {
  color: var(--nav-icon-active) !important;
}

.nav-item:hover .nav-icon i {
  color: var(--nav-icon-hover) !important;
}

/* 按钮图标强制样式 */
.btn i, .back-btn i, .header-btn i {
  color: inherit !important;
  font-size: inherit !important;
}

.back-btn i {
  color: var(--btn-icon-primary) !important;
}

.btn-primary i {
  color: var(--btn-icon-primary) !important;
}

.btn-secondary i {
  color: var(--btn-icon-secondary) !important;
}

.btn-success i {
  color: var(--btn-icon-success) !important;
}

.btn-warning i {
  color: var(--btn-icon-warning) !important;
}

.btn-danger i {
  color: var(--btn-icon-danger) !important;
}

/* 状态图标颜色 */
.status-success i {
  color: var(--status-success-icon) !important;
}

.status-warning i {
  color: var(--status-warning-icon) !important;
}

.status-error i {
  color: var(--status-error-icon) !important;
}

.status-info i {
  color: var(--status-info-icon) !important;
}

/* 侧边栏图标 */
.sidebar .nav-icon i {
  color: var(--sidebar-icon-color) !important;
}

.sidebar .nav-item.active .nav-icon i {
  color: var(--sidebar-icon-active) !important;
}

/* 最高优先级保护 - 在需要时使用 */
[class*="icon"] i {
  color: inherit !important;
}

/* 针对内联样式的保护 */
i[style] {
  color: inherit !important;
}

/* 第三方库兼容样式 */
.layui-nav .layui-nav-item a i {
  color: inherit !important;
}

.navbar-nav .nav-link i {
  color: inherit !important;
}

.el-button i {
  color: inherit !important;
}

/* 悬停和激活状态的通用样式 */
.icon-hover:hover i {
  color: var(--icon-color-hover) !important;
  transition: color 0.3s ease !important;
}

.icon-disabled i {
  color: var(--icon-color-disabled) !important;
  cursor: not-allowed !important;
}

/* 通用图标尺寸类 */
.icon-sm { font-size: var(--icon-size-small); }
.icon-md { font-size: var(--icon-size-medium); }
.icon-lg { font-size: var(--icon-size-large); }

/* 图标颜色类 */
.icon-primary { color: var(--icon-color-primary) !important; }
.icon-active { color: var(--icon-color-active) !important; }
.icon-inactive { color: var(--icon-color-inactive) !important; }

/* ========== 使用说明 ========== */
/*
使用方法示例:

.my-component {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-large);
  padding: var(--spacing-lg);
  transition: var(--transition-normal);
}

.my-component:hover {
  background: var(--opacity-hover);
  transform: translateY(-2px);
}
*/

/* ========== 登录弹窗拱形裁剪 ========== */
/* 预设拱形样式，避免弹窗打开时的闪烁效果 */
.layui-layer.arch-layer {
    clip-path: ellipse(90% 90% at 50% 100%) !important;
    overflow: visible !important;
    border-radius: 0 !important;
}