/* ─────────────────────────────────────────────────────────────────────────
 * trading.thash — 共享设计 tokens
 *
 * 基于 Supabase 设计系统（暗色主题）+ TradingView 交易终端扩展。
 * 所有页面引用此文件以保持视觉一致性。
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ──────────────────────────────────────────────────── */
  --bg: #171717;
  --bg-elevated: #1c1c1c;
  --bg-higher: #222222;
  --surface: #1c1c1c;
  --surface-warm: var(--surface);

  /* ─── Foreground ───────────────────────────────────────────────── */
  --fg: #fafafa;
  --fg-2: #b4b4b4;
  --muted: #898989;
  --meta: #4d4d4d;

  /* ─── Border ───────────────────────────────────────────────────── */
  --border: #2e2e2e;
  --border-soft: #242424;
  --border-strong: #393939;

  /* ─── Accent ─────────────────────────────────────────────────────
   * 使用 Supabase 翠绿色作为品牌标识色。
   * 交易方向色独立定义。 */
  --accent: #3ecf8e;
  --accent-on: #0f0f0f;
  --accent-hover: #00c573;
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* ─── Trading-specific ───────────────────────────────────────────
   * 交易终端专属颜色：涨/跌/平 */
  --up: #00c573;
  --up-bg: rgba(0, 197, 115, 0.12);
  --down: #ef4444;
  --down-bg: rgba(239, 68, 68, 0.12);
  --neutral: #898989;

  /* ─── Semantic ─────────────────────────────────────────────────── */
  --success: #16a34a;
  --warn: #eab308;
  --danger: #dc2626;
  --info: #3b82f6;

  /* ─── Typography ───────────────────────────────────────────────── */
  --font-display: "Circular", "custom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Circular", "custom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Source Code Pro", "Office Code Pro", Menlo, Monaco, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 56px;

  --leading-body: 1.5;
  --leading-tight: 1.15;
  --tracking-display: normal;

  /* ─── Spacing ──────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --section-y-desktop: 0px;
  --section-y-tablet: 0px;
  --section-y-phone: 0px;

  /* ─── Radius ───────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* ─── Elevation ────────────────────────────────────────────────── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 0 0 1px var(--border), 0 4px 12px rgba(0, 0, 0, 0.4);

  /* ─── Focus ────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 50%);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ─── Layout ───────────────────────────────────────────────────── */
  --container-max: 1400px;
  --container-gutter: 0px;

  /* ─── Navigation ─────────────────────────────────────────────────
   * Two nav variants share the same chrome: 48px height, #171717 base
   * with 92% opacity + backdrop-blur, 1px bottom border at --border.
   *
   *   nav-marketing — landing pages with dropdown + sub-menu
   *   nav-product   — app pages with simple links + dropdown
   *
   * Both use: height 48px, background rgba(23,23,23,0.92),
   * backdrop-filter blur(16px) saturate(180%), border-bottom
   * 1px solid var(--border). */
  --nav-height: 48px;

  /* ─── Terminal-specific ────────────────────────────────────────── */
  --toolbar-h: 44px;
  --statusbar-h: 28px;
  --sidebar-w: 260px;
  --detail-w: 300px;
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED LAYOUT — all 16 pages
   ══════════════════════════════════════════════════════════════════════ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED NAVIGATION — all 16 pages
   ══════════════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(23,23,23,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  height: 48px;
}
.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto; padding: 0 var(--container-gutter);
  height: 100%;
  display: flex; align-items: center;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--fg); text-decoration: none;
  margin-right: var(--space-8);
}
.logo-img {
  height: 22px; width: auto;
  display: block;
}
.nav-links { display: flex; align-items: center; gap: var(--space-4); margin-right: auto; }
.nav-links > a, .nav-dropdown dt {
  font-size: var(--text-sm); color: var(--fg-2); white-space: nowrap;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
  cursor: pointer;
}
.nav-links > a:hover, .nav-dropdown dt:hover { color: var(--fg); }
.nav-links > a.active { color: var(--fg); }
.nav-dropdown { position: relative; }
.nav-dropdown dt {
  display: flex; align-items: center; gap: 4px;
  user-select: none;
}
.nav-dropdown dt::after {
  content: ""; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid var(--muted); margin-top: 1px;
}
.nav-dropdown dd {
  display: none; position: absolute; top: 100%; left: -12px;
  background: var(--bg-higher);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  min-width: 160px; z-index: 200;
  margin-top: 4px;
}
.nav-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0;
  height: 8px; z-index: 199;
}
.nav-dropdown:hover dd { display: block; }
.nav-dropdown dd a {
  display: block; padding: 7px 16px;
  font-size: var(--text-sm); color: var(--fg-2);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease-standard);
}
.nav-dropdown dd a:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.nav-dropdown dd a.active { color: var(--fg); }
.nav-dropdown dd .sep {
  height: 1px; background: var(--border-soft); margin: var(--space-1) var(--space-3);
}
/* sub-menu (marketing pages) */
.nav-sub { position: relative; }
.nav-sub dt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 16px;
  font-size: var(--text-sm); color: var(--fg-2);
  cursor: pointer;
  user-select: none;
}
.nav-sub dt::after {
  content: "▸";
  font-size: 10px; color: var(--muted);
}
.nav-sub dd {
  display: none; position: absolute; top: -6px; left: calc(100% + 4px);
  background: var(--bg-higher);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  min-width: 140px;
  z-index: 210;
}
.nav-sub::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%;
  width: 8px; z-index: 209;
}
.nav-sub:hover dd { display: block; }
.nav-sub dd a {
  display: block; padding: 7px 16px;
  font-size: var(--text-sm); color: var(--fg-2);
  text-decoration: none;
  transition: all var(--motion-fast) var(--ease-standard);
}
.nav-sub dd a:hover { color: var(--fg); background: rgba(255,255,255,0.04); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.14;
  text-decoration: none; white-space: nowrap;
  transition: all var(--motion-fast) var(--ease-standard);
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-on); border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--fg-2); border: 1px solid transparent; }
.btn-ghost:hover { color: var(--fg); background: rgba(255,255,255,0.05); border-color: var(--border); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ═══ CPDR balance — managed via Settings > 订阅管理, not shown in global nav ═══ */