/* DS platform font for the TradingView chart.
   `custom_font_family` (set in useInitializeChart.ts) styles the canvas-drawn
   time/price scales + pane, but TradingView only picks up a non-system font if
   it's loaded in this custom CSS. The `font-family` rule below covers the HTML
   chrome (toolbar, legend, popups, dialogs). Keep in sync with
   --font-family-platform (theme/typography.css). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* This file is loaded ONLY into the TradingView iframe (via custom_css_url), so
   the broad !important here is contained to the chart and cannot leak into the app.
   TradingView's chrome hardcodes `font-family: -apple-system, …, Trebuchet MS, …`
   on many elements, so a plain :root rule is not enough — we have to force it. */
:root,
body,
body * {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Everything in the chart iframe at 12px (HTML chrome — top header toolbar,
   the bottom time-axis bar incl. interval buttons + clock, legend, buttons,
   popups, dialogs, menus). `--ui-lib-typography-font-size` is the variable many
   ui-lib components read; the raw `font-size` blanket catches everything else.
   Scoped to the iframe via custom_css_url, so it can't leak into the app.
   Canvas-drawn text (axis ticks) isn't CSS-styled — set via
   `scalesProperties.fontSize` in useInitializeChart.ts. */
* {
  font-size: 12px !important;
  --ui-lib-typography-font-size: 12px !important;
  --ui-lib-typography-line-height: 16px !important;
}

/* …but NOT the screen-reader-only text TradingView collapses via `font-size: 0`
   — the blanket above would un-hide it, so force it back. The keyboard-commands
   hint block is `<div role="contentinfo" style="font-size:0px">`; aria-live /
   visually-hidden / status / alert regions use the same trick. */
[role='contentinfo'],
[role='contentinfo'] *,
[class*='visually-hidden'],
[class*='visually-hidden'] *,
[aria-live],
[aria-live] *,
.aria-live-regions-wrapper,
.aria-live-regions-wrapper *,
[role='status'],
[role='status'] *,
[role='alert'],
[role='alert'] * {
  font-size: 0 !important;
}

.theme-dark:root {
  --tv-color-platform-background: #121212; /* --color-bg-secondary */
  --tv-color-pane-background: #121212; /* --color-bg-secondary */

  --tv-color-toolbar-button-text: #9C9C9C; /* --color-neutral-2 */
  --tv-color-toolbar-button-text-active: #FFFFFF; /* --color-brand-primary */
  --tv-color-toolbar-button-text-active-hover: #FFFFFF; /* --color-brand-primary */

  --tv-color-toolbar-button-background-hover: #2D2D2D; /* --color-hover */
	--tv-color-toolbar-button-background-expanded: #2A2A2A; /* --color-pressed */
	--tv-color-toolbar-button-background-active: #383838; /* --color-active */
	--tv-color-toolbar-button-background-active-hover: #2D2D2D; /* --color-hover */

  --tv-color-toolbar-toggle-button-background-active: #FFFFFF; /* --color-brand-primary */
  --tv-color-toolbar-toggle-button-background-active-hover: #FFFFFF; /* --color-brand-primary */

  --tv-color-popup-background: #0A0A0A; /* --color-bg-primary */
  --tv-color-popup-element-text: #9C9C9C; /* --color-neutral-2 */
  --tv-color-popup-element-text-hover: #E9E9E9; /* --color-neutral-1 */
  --tv-color-popup-element-secondary-text: #606060; /* --color-neutral-3 */
  --tv-color-popup-element-text-active: #FFFFFF; /* --color-brand-primary */
  --tv-color-popup-element-background-hover: #2D2D2D; /* --color-hover */
  --tv-color-popup-element-background-active: #383838; /* --color-active */
  --tv-color-popup-element-divider-background: #383838; /* --color-active */
}

:root:not(.theme-dark) {
  --tv-color-platform-background: #EAE7DC; /* --color-bg-secondary */
  --tv-color-pane-background: #EAE7DC; /* --color-bg-secondary */

  --tv-color-toolbar-button-text: #7A7870; /* --color-neutral-2 */
  --tv-color-toolbar-button-text-active: #171717; /* --color-brand-primary */
  --tv-color-toolbar-button-text-active-hover: #171717; /* --color-brand-primary */

  --tv-color-toolbar-button-background-hover: #CBC5B3; /* --color-hover */
	--tv-color-toolbar-button-background-expanded: #DBD7C8; /* --color-pressed */
	--tv-color-toolbar-button-background-active: #B7B09E; /* --color-active */
	--tv-color-toolbar-button-background-active-hover: #CBC5B3; /* --color-hover */

  --tv-color-toolbar-toggle-button-background-active: #171717; /* --color-brand-primary */
  --tv-color-toolbar-toggle-button-background-active-hover: #171717; /* --color-brand-primary */

  --tv-color-popup-background: #F7F6F0; /* --color-bg-primary */
  --tv-color-popup-element-text: #7A7870; /* --color-neutral-2 */
  --tv-color-popup-element-text-hover: #171717; /* --color-neutral-1 */
  --tv-color-popup-element-secondary-text: #A5A297; /* --color-neutral-3 */
  --tv-color-popup-element-text-active: #171717; /* --color-brand-primary */
  --tv-color-popup-element-background-hover: #CBC5B3; /* --color-hover */
  --tv-color-popup-element-background-active: #B7B09E; /* --color-active */
  --tv-color-popup-element-divider-background: #B7B09E; /* --color-active */
}