/* ============================================================
   NovaX — OKX 暗色主题变量
   OKX Dark Theme Design Tokens
   ============================================================
   使用说明：所有组件的颜色/间距/字体均通过此文件控制，
   修改此处即可全局换肤。
   ============================================================ */

:root {
    /* --------------------------------------------------------
       1. 背景色层叠体系（Background Layering）
       OKX 使用多层背景来营造空间感，从最深到最浅：
       bg-primary → bg-secondary → bg-card → bg-card-hover
       -------------------------------------------------------- */
    --bg-primary:      #0b0e11;  /* 最底层背景，接近纯黑 */
    --bg-secondary:    #0f1218;  /* 二级背景，页面大面积使用 */
    --bg-card:         #181a20;  /* 卡片/组件背景，比 OKX 稍深显精致 */
    --bg-card-hover:   #1e2028;  /* 卡片悬浮态 */
    --bg-input:        #24262b;  /* 输入框背景 */
    --bg-modal:        #1e2028;  /* 模态框/弹出层背景 */
    --bg-tabbar:       #0b0e11;  /* 底部导航栏背景 */
    --bg-header:       #0b0e11;  /* 顶部导航栏背景 */
    --bg-dropdown:     #1e2028;  /* 下拉菜单背景 */
    --bg-tooltip:      #2b2f36;  /* 提示框背景 */

    /* --------------------------------------------------------
       2. 文字色阶（Text Hierarchy）
       primary → secondary → muted 构成完整的信息层级
       -------------------------------------------------------- */
    --text-primary:      #eaecef;  /* 主文字，略带暖白不刺眼 */
    --text-secondary:    #848e9c;  /* 辅助文字 */
    --text-muted:        #5e6673;  /* 弱化文字，用于占位/说明 */
    --text-inverse:      #0b0e11;  /* 反色文字（用在品牌色按钮上） */

    /* --------------------------------------------------------
       3. 品牌色（Brand Colors）
       OKX 标志性金色，用于高亮/激活/强调
       -------------------------------------------------------- */
    --color-brand:       #f0b90b;  /* OKX 金 */
    --color-brand-dark:  #d4a20a;  /* 深金色（hover 态） */
    --color-brand-light: #fcd535;  /* 亮金色（点击态） */
    --color-brand-bg:    rgba(240, 185, 11, 0.08); /* 金色背景光晕 */

    /* --------------------------------------------------------
       4. 涨跌色（Market Colors）
       绿涨红跌是行业标准，色值取自 OKX 精确值
       -------------------------------------------------------- */
    --color-up:         #0ecb81;  /* 涨色 - 翠绿 */
    --color-up-bg:      rgba(14, 203, 129, 0.10); /* 涨色背景 */
    --color-up-text:    #0ecb81;  /* 涨色文字 */
    --color-down:       #f6465d;  /* 跌色 - 玫红 */
    --color-down-bg:    rgba(246, 70, 93, 0.10);  /* 跌色背景 */
    --color-down-text:  #f6465d;  /* 跌色文字 */

    /* --------------------------------------------------------
       5. 按钮色（Button Colors）
       -------------------------------------------------------- */
    --btn-primary-bg:    #f0b90b;  /* 主按钮 - 金色 */
    --btn-primary-text:  #0b0e11;  /* 主按钮文字 */
    --btn-primary-hover: #fcd535;  /* 主按钮悬浮 */

    --btn-up-bg:    #0ecb81;      /* 买涨按钮 - 绿色 */
    --btn-up-text:  #ffffff;
    --btn-up-hover: #00d487;

    --btn-down-bg:    #f6465d;    /* 买跌按钮 - 红色 */
    --btn-down-text:  #ffffff;
    --btn-down-hover: #ff5a6e;

    /* --------------------------------------------------------
       6. 边框与阴影（Borders & Shadows）
       -------------------------------------------------------- */
    --border-color:       #2b2f36;   /* 默认边框 */
    --border-color-light: #383c44;   /* 浅边框 */
    --border-color-focus: #f0b90b;   /* 聚焦边框（金色） */

    --border-radius-sm: 2px;     /* 小圆角（标签/badge） */
    --border-radius:    6px;     /* 标准圆角（按钮/输入框） */
    --border-radius-lg: 10px;    /* 大圆角（卡片/模态框） */
    --border-radius-xl: 14px;    /* 特大圆角（底部弹出层） */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);      /* 卡片阴影 */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);      /* 下拉菜单阴影 */
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.7);      /* 模态框阴影 */

    /* --------------------------------------------------------
       7. 间距体系（Spacing System）
       8 为基准单位，按 4 递增
       -------------------------------------------------------- */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  12px;
    --spacing-lg:  16px;
    --spacing-xl:  20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;

    /* --------------------------------------------------------
       8. 字体（Typography）
       -------------------------------------------------------- */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei',
                   sans-serif;

    --font-size-xs:  11px;   /* 辅助信息 */
    --font-size-sm:  12px;   /* 标签/说明 */
    --font-size-md:  14px;   /* 正文 */
    --font-size-lg:  16px;   /* 小标题 */
    --font-size-xl:  18px;   /* 标题 */
    --font-size-2xl: 20px;   /* 大标题 */
    --font-size-3xl: 24px;   /* 页面标题 */
    --font-size-4xl: 32px;   /* 数字展示 */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:  600;
    --font-weight-bolder: 700;

    /* --------------------------------------------------------
       9. 布局（Layout）
       -------------------------------------------------------- */
    --header-height:  56px;              /* 顶部导航栏高度 */
    --tabbar-height:  56px;              /* 底部导航栏高度 */
    --safe-bottom:    env(safe-area-inset-bottom, 0px); /* iPhone 底部安全区 */
    --page-padding:   20px;              /* 页面两侧留白 */
    --max-width:      100%;              /* 移动端全屏铺满 */
}