/* Raw colors, then the semantic roles built from them. Nothing is prefixed: the theme swaps the
   values and the mode reassigns the roles, so every consumer reads the same `var(--role)` whichever
   pair is active. This block is the default — theme `light`, mode `default`. */
:root {
  --gray-0: #fff;
  --gray-200: #f5f5f5;
  --gray-400: #ccc;
  --gray-900: #000;

  --blue-400: #304ffe;

  --green-350: #1e9765;

  --red-400: #be3436;

  --surface: var(--gray-0);
  --grid: var(--gray-200);
  --text: var(--gray-900);
  --accent: var(--blue-400);
  --candle-up: var(--blue-400);
  --candle-down: var(--red-400);
  --bid: var(--red-400);
  --ask: var(--blue-400);
  --buy: var(--blue-400);
  --sell: var(--red-400);
  --take-profit: var(--blue-400);
  --hmr-label: var(--red-400);
  --toast-surface: var(--gray-900);
  --toast-text: var(--gray-0);
  --toolbar-toggle-active: var(--gray-400);
}

/* The dark palette. Only raw colors change — the roles above already point at them.
   Two selectors because two documents switch differently. Ours carries [data-theme]. The chart's
   nested document loads this same file through custom_css_url, but ChartWidgetService can only mark
   it once the widget is ready — and TradingView paints its toolbars long before that, so the light
   default above would show through until then. TradingView puts .theme-dark on that document's root
   from its first paint (its own themed.css keys off the same class), which closes the gap. */
:root[data-theme='dark'],
:root.theme-dark {
  --gray-0: #000;
  --gray-200: #141315;
  --gray-400: #272727;
  --gray-900: #fff;

  --blue-400: #4571ec;

  --green-350: #17714b;

  --red-400: #fc5f6a;
}

/* Where a mode assigns a role differently from the default. Raw colors come from the theme blocks
   above, so a mode is only its differences — one block, whichever theme it runs on. Needs a value per
   theme? Add [data-theme='dark'][data-mode='crypto'], which outranks the theme block on specificity. */
:root[data-mode='crypto'] {
  --candle-up: var(--green-350);
}

/* Scale toggle aside button by device */
@media (hover: none) and (pointer: coarse) {
  [data-name='toolbar-drawing-toggle-button'] {
    width: 18px;
    height: 40px;
  }

  [data-name='toolbar-drawing-toggle-button'] svg {
    width: 100%;
    height: auto;
  }
}

/* Overrides vars must be used from - https://www.tradingview.com/charting-library-docs/latest/customization/styles/CSS-Color-Themes */
:root {
  --tv-color-platform-background: var(--surface);
  --tv-color-pane-background: var(--surface);

  --tv-color-toolbar-button-text: var(--text);
  --tv-color-toolbar-button-text-active: var(--accent);

  --tv-color-toolbar-divider-background: var(--surface);

  --tv-color-toolbar-toggle-button-background-active: var(--toolbar-toggle-active);
  --tv-color-toolbar-toggle-button-background-active-hover: var(--toolbar-toggle-active);

  --tv-color-popup-element-background-active: var(--accent);
}

body {
  background-color: var(--surface);
}

.legendMainSourceWrapper-l31H9iuA {
  display: none;
}

/* Hide bottom toolbar */
.chart-controls-bar {
  display: none !important;
}

/* Reduce spacer width in top bar */
[class*='separatorWrap-'] {
  width: 1px !important;
}