/* ══════════════════════════════════════════════════════════════
   CoinKip — 设计令牌 (Design Tokens)
   专业金融级深色科技风 · 对标 Binance/OKX/Coinbase 机构版
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── 核心背景 ── */
  --bg-primary:     #0F1117;
  --bg-secondary:   #1A1D29;
  --bg-tertiary:    #232734;
  --bg-hover:       #262A36;
  --bg-active:      #2E3344;

  /* ── 侧边栏 ── */
  --sidebar-bg:     #0C0E15;
  --sidebar-width:  240px;
  --sidebar-collapsed-width: 64px;

  /* ── 顶栏 ── */
  --topbar-height:  56px;
  --topbar-bg:      rgba(15, 17, 23, 0.85);

  /* ── 品牌主色 ── */
  --brand-primary:  #165DFF;
  --brand-hover:    #1E6FFF;
  --brand-active:   #0E4FD9;
  --brand-subtle:   rgba(22, 93, 255, 0.10);
  --brand-glow:     rgba(22, 93, 255, 0.25);

  /* ── 涨跌功能色 (默认: 绿涨红跌, 国际标准) ── */
  --color-up:       #00B578;
  --color-up-bg:    rgba(0, 181, 120, 0.10);
  --color-up-glow:  rgba(0, 181, 120, 0.25);
  --color-down:     #F53F3F;
  --color-down-bg:  rgba(245, 63, 63, 0.10);
  --color-down-glow:rgba(245, 63, 63, 0.25);

  /* ── 警示色 ── */
  --color-warning:  #FF7D00;
  --color-warning-bg: rgba(255, 125, 0, 0.10);
  --color-info:     #165DFF;
  --color-info-bg:  rgba(22, 93, 255, 0.08);

  /* ── 文本层级 (WCAG AA 标准) ── */
  --text-primary:   #FFFFFF;
  --text-secondary: #C9CDD4;
  --text-tertiary:  #86909C;
  --text-disabled:  #4E5969;

  /* ── 边框 / 分隔线 ── */
  --border-primary:   rgba(255, 255, 255, 0.06);
  --border-secondary: rgba(255, 255, 255, 0.10);
  --border-hover:     rgba(255, 255, 255, 0.15);
  --border-focus:     rgba(22, 93, 255, 0.50);

  /* ── 圆角 ── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── 间距 ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  /* ── 阴影 ── */
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-dropdown:0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-modal:   0 8px 32px rgba(0, 0, 0, 0.50);

  /* ── 字体 ── */
  --font-sans:  'OKXSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --font-xs:    12px;
  --font-sm:    13px;
  --font-base:  14px;
  --font-md:    15px;
  --font-lg:    17px;
  --font-xl:    21px;
  --font-2xl:   26px;
  --font-3xl:   34px;

  /* ── 过渡 ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.35s ease;

  /* ── Z-Index 层级 ── */
  --z-sidebar:    100;
  --z-topbar:     200;
  --z-dropdown:   300;
  --z-modal:      400;
  --z-toast:      500;
}

/* ══════════════════════════════════════════════════════════════
   涨跌色反转 (红涨绿跌 — 中国大陆标准)
   ══════════════════════════════════════════════════════════════ */
[data-color-mode="cn"] {
  --color-up:       #F53F3F;
  --color-up-bg:    rgba(245, 63, 63, 0.10);
  --color-up-glow:  rgba(245, 63, 63, 0.25);
  --color-down:     #00B578;
  --color-down-bg:  rgba(0, 181, 120, 0.10);
  --color-down-glow:rgba(0, 181, 120, 0.25);
}