/* TradeBot design tokens & brand — single source of truth for colors,
   fonts, logos and shared brand styles. Load before all other stylesheets. */

@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  /* Brand assets */
  --logo-url: url("/static/img/logo.png");
  --logo-white-url: url("/static/img/logo_white.png");

  /* Typography: sans for UI labels/headlines/articles, mono for financial data */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'Source Code Pro', 'IBM Plex Mono', ui-monospace, monospace;
  --num-features: 'tnum' 1, 'zero' 1;   /* tabular numbers + slashed zero */

  /* Shape */
  --radius: 8px;             /* panels */
  --radius-sm: 4px;          /* inputs, buttons, tabs */

  /* Base palette (VS Code dark workbench) */
  --bg-page: #181818;        /* window background, activity bar, gaps */
  --bg-deep: #181818;        /* status / ticker bar */
  --surface: #1f1f1f;        /* editor area: chart, news, login background */
  --sidebar-bg: #252526;     /* side bars (portfolio, search, actions/chat) */
  --surface-card: #252526;   /* login card */
  --header-bg: transparent;  /* panel header bars */
  --inset: #2b2b2b;          /* nested cards */
  --input-bg: #313131;       /* inputs */
  --selected: #04395e;       /* selected list items */
  --tab-active: #37373d;     /* active tab / activity bar item */
  --border: #2b2b2b;
  --border-strong: #3c3c3c;
  --hover: #2a2d2e;
  --light: #ffffff;

  /* Text */
  --text: #cccccc;
  --text-bright: #e7e7e7;
  --text-muted: #9d9d9d;
  --text-faint: #858585;
  --text-on-light: #000000;
  --label: #bbbbbb;          /* panel headers, column labels */
  --on-accent: #ffffff;      /* text on accent-filled backgrounds */

  /* Buttons & focus */
  --button-bg: #0e639c;
  --button-hover: #1177bb;
  --button-secondary-bg: #3a3d41;
  --button-secondary-hover: #45494e;
  --focus: #007fd4;

  /* Accents */
  --accent: #3794ff;         /* VS Code link blue — brand, symbols, chart MA */
  --up: #12c7a9;             /* gains / bullish */
  --down: #f23645;           /* losses / bearish */
  --warn: #ff9800;           /* agent status / orange highlights */
  --warn-strong: #a35f00;
  --teal: #22ab94;           /* approve actions */

  /* Dimmed accent fills */
  --accent-dim: rgba(55, 148, 255, .15);
  --up-dim: rgba(34, 171, 148, .15);
  --up-faint: rgba(34, 171, 148, .4);
  --down-dim: rgba(242, 54, 69, .15);
  --down-faint: rgba(242, 54, 69, .4);
  --warn-dim: rgba(255, 152, 0, .08);
  --warn-glow: rgba(255, 152, 0, .25);
  --warn-outline: rgba(255, 152, 0, .4);
  --teal-dim: rgba(34, 171, 148, .12);
}

/* Typography roles: monospaced financial data, prices, tables */
.mono, table, .price, .up, .down, .sym {
  font-family: var(--font-mono);
  font-feature-settings: var(--num-features);
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.brand img { height: 32px; }

.brand-logo {
  width: 32px;
  height: 32px;
  background: var(--logo-url) center / contain no-repeat;
}

.brand-icon {
  font-size: 22px;
  font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 1, 'GRAD' 0;
}

.brand .version {
  font-size: .75rem;
  color: var(--text-faint);
  font-weight: 400;
}

.logo-lg {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: var(--logo-url) center / contain no-repeat;
}