/* Quant Trading System — Bloomberg-style dark theme */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+SC:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --bg-0: #07090d;
  --bg-1: #0c1118;
  --bg-2: #131a23;
  --bg-3: #1a232f;
  --bg-hover: #1f2a37;
  --border: #1a2331;
  --border-bright: #243042;
  --border-strong: #364154;

  /* Text */
  --text-0: #e9edf2;
  --text-1: #a0a8b3;
  --text-2: #6b7380;
  --text-3: #4a5260;
  --text-amber: #f0a500;
  --text-amber-bright: #ffb84d;

  /* Bloomberg signature */
  --amber: #f0a500;
  --amber-bright: #ffc14d;
  --amber-soft: rgba(240, 165, 0, 0.12);

  /* Semantic — A股 convention default (红涨绿跌) */
  --up: #ef3b3b;
  --up-bright: #ff5757;
  --up-bg: rgba(239, 59, 59, 0.12);
  --up-line: rgba(239, 59, 59, 0.4);
  --down: #22c55e;
  --down-bright: #4ade80;
  --down-bg: rgba(34, 197, 94, 0.12);
  --down-line: rgba(34, 197, 94, 0.4);
  --flat: #6b7380;

  /* Status / accents */
  --info: #3b82f6;
  --info-bright: #60a5fa;
  --info-bg: rgba(59, 130, 246, 0.12);
  --warn: #facc15;
  --warn-bg: rgba(250, 204, 21, 0.12);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.15);
  --magenta: #d946ef;
  --cyan: #06b6d4;

  /* Typography */
  --font-ui: "IBM Plex Sans", "IBM Plex Sans SC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-lg: 13px;
  --fs-xl: 15px;
  --fs-2xl: 18px;
  --fs-3xl: 24px;
  --fs-4xl: 32px;
  --fs-5xl: 44px;

  /* Spacing */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;

  --row-h: 24px;
  --nav-w: 56px;
  --topbar-h: 44px;
  --footerbar-h: 34px;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
}

/* Light theme override */
[data-theme="light"] {
  --bg-0: #f6f5f1;
  --bg-1: #ffffff;
  --bg-2: #fafaf7;
  --bg-3: #f0efeb;
  --bg-hover: #e7e6e0;
  --border: #e0ddd5;
  --border-bright: #d0ccc2;
  --border-strong: #b6b1a3;
  --text-0: #1c1c1a;
  --text-1: #4a4944;
  --text-2: #7a7872;
  --text-3: #a8a59c;
  --amber-soft: rgba(192, 110, 0, 0.1);
  --amber: #b06800;
  --amber-bright: #d97900;
  --text-amber: #b06800;
  --up-bg: rgba(201, 50, 47, 0.08);
  --down-bg: rgba(22, 142, 70, 0.08);
  --up: #c9322f;
  --up-bright: #e64543;
  --down: #168e46;
  --down-bright: #1fab57;
}

/* US color convention: green up, red down */
[data-pnl="us"] {
  --up: #22c55e;
  --up-bright: #4ade80;
  --up-bg: rgba(34, 197, 94, 0.12);
  --up-line: rgba(34, 197, 94, 0.4);
  --down: #ef3b3b;
  --down-bright: #ff5757;
  --down-bg: rgba(239, 59, 59, 0.12);
  --down-line: rgba(239, 59, 59, 0.4);
}
[data-theme="light"][data-pnl="us"] {
  --up: #168e46;
  --up-bright: #1fab57;
  --down: #c9322f;
  --down-bright: #e64543;
}

/* Neutral: blue up, orange down */
[data-pnl="neutral"] {
  --up: #3b82f6;
  --up-bright: #60a5fa;
  --up-bg: rgba(59, 130, 246, 0.12);
  --up-line: rgba(59, 130, 246, 0.4);
  --down: #f97316;
  --down-bright: #fb923c;
  --down-bg: rgba(249, 115, 22, 0.12);
  --down-line: rgba(249, 115, 22, 0.4);
}

/* Density */
[data-density="compact"] {
  --fs-xs: 9px;
  --fs-sm: 10px;
  --fs-md: 11px;
  --fs-lg: 12px;
  --fs-xl: 13px;
  --row-h: 20px;
  --sp-4: 8px;
  --sp-5: 12px;
}
[data-density="comfy"] {
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 16px;
  --row-h: 30px;
  --sp-4: 14px;
  --sp-5: 20px;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

button { font-family: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }
.muted { color: var(--text-2); }
.dim { color: var(--text-1); }
.amber { color: var(--amber); }

.label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  font-weight: 500;
}

.scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 3px;
}
.scroll::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

::selection { background: var(--amber); color: #000; }

/* Subtle blinking dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.pulse { animation: pulse-dot 1.4s ease-in-out infinite; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes flash-up {
  0% { background: var(--up-bg); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0% { background: var(--down-bg); }
  100% { background: transparent; }
}
.flash-up { animation: flash-up 0.6s ease-out; }
.flash-down { animation: flash-down 0.6s ease-out; }

/* Layout helpers */
.flex { display: flex; }
.col { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.grow { flex: 1; min-width: 0; min-height: 0; }
.between { justify-content: space-between; }
.center { align-items: center; }
.middle { justify-content: center; }