:root {
  /* Colors */
  --tr-dark-grey: #404040;
  --tr-medium-grey: #666666;
  --tr-hover-background-grey: #F8F8F8;
  --tr-grey-30: #EAEAEA;
  --tr-contrast-grey: #949494;
  --tr-dark-green: #387c2b;
  --tr-light-green: #77a22d;
  --tr-positive-lightest-dark-mode: #073D29;
  --tr-dark-red: #A00000;
  --positive-lightest: #E4F3CD;
  --negative-lightest: #F5CECE;
  --negative-lightest-dark-mode: #560000;
  --negative-main: #EB0000;
  --table-border: #D1D1D180;
  --black: #000000;
  --white: #FFFFFF;
  --table-border-dark-mode: #54545480;
  --drop-down-dark-mode: #1C1C1C;
  --menu-hover-dark-mode: #1F1F1F;
  --tr-chart-1: #D64000;
  --tr-chart-1-dark-mode: #FA6400;
  --tr-chart1-20: #C23B0033;
  --tr-chart1-20-dark-mode: #FA640033;
  --tr-chart-2: #404040;
  --tr-chart-2-dark-mode: #AFAFAF;
  --tr-chart-3: #0499A9;
  --tr-background-grey-dark-mode: #171717;
  --tr-action-disabled: #FFFFFF4D;
  --tr-mind-background: #0F2B4D;
  --tr-mind-main: #72A0FF;
  --tr-chart-fill-start: #D6400033;
  --tr-chart-fill-stop: #D6400000;

  /* Typography */
  --int-h1-font-size: 32px;
  --int-h1-line-height: 40px;
  --int-text-xs-font-size: 14px;
  --int-text-xs-line-height: 20px;
  --int-text-s-font-size: 16px;
  --int-text-s-line-height: 24px;
  --int-text-lg-font-size: 24px;
  --int-text-xl-font-size: 28px;
  --int-text-xl-line-height: 36px;
  --int-text-base-font-size: 18px;
  --int-text-base-line-height: 26px;
  --fwc-primary-font: knowledge-regular;
  --fwc-secondary-font: knowledge-regular;
  --theme-primary-font: knowledge-regular;

  /* Component specific variables */
  --fwc-input-border: var(--tr-dark-grey);
  --fwc-text-primary: var(--tr-dark-grey);
  --fwc-button-press-text: var(--black);
  --fwc-primary-main: var(--black);
  --fwc-input-hover: var(--tr-dark-grey);
  --fwc-button-hover: var(--tr-dark-grey);
  --fwc-text-label: var(--tr-medium-grey);
  --fwc-menu-hover-background: var(--tr-grey-30);
  --fwc-menu-category-background: var(--tr-grey-30);
  --fwc-background-elevation-1: var(--white);
  --fwc-background-main: var(--white);
  --fwc-common-fill: var(--tr-hover-background-grey);
  --fwc-data-positive-main: var(--tr-dark-green);
  --fwc-data-positive-lightest: var(--positive-lightest);
  --fwc-data-neutral-main: var(--tr-medium-grey);
  --fwc-data-neutral-lightest: var(--tr-grey-30);
  --fwc-data-negative-main: var(--tr-dark-red);
  --fwc-data-negative-lightest: var(--negative-lightest);
  --fwc-background-highlight-secondary: var(--tr-hover-background-grey);
  --fwc-table-border: var(--table-border);
  --fwc-tag-background-darker: var(--tr-grey-30);
  --fwc-card-background: var(--tr-hover-background-grey);
  --fwc-card-border: none;
  --fwc-radius-2: none;
  --int-rounded-1-border-radius: none;
  --int-h1-color: var(--tr-dark-grey);
  --fwc-chart-1: var(--tr-chart-1);
  --fwc-chart-2: var(--tr-chart-2);
  --fwc-chart-3: var(--tr-chart-3);
}

/* Component-specific variables for dark theme */
@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] {
    background-color: var(--black);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="cfMarket"] {
    --fwc-input-border: var(--tr-contrast-grey);
    --fwc-background-main: var(--black);
    --fwc-menu-category-background: var(--tr-dark-grey);
    --fwc-menu-border: var(--table-border-dark-mode);
    --fwc-card-border: var(--white);
    --fwc-text-primary: var(--white);
    --fwc-text-label: var(--tr-contrast-grey);
    --fwc-button-press-text: var(--white);
    --fwc-input-hover: var(--white);
    --fwc-primary-main: var(--white);
    --fwc-background-elevation-1: var(--drop-down-dark-mode);
    --fwc-menu-hover-background: var(--menu-hover-dark-mode);
    --fwc-background-highlight-secondary: var(--table-border-dark-mode);
    --fwc-common-fill: var(--table-border-dark-mode);
    --int-h1-color: var(--white);
    --fwc-chart-1: var(--tr-chart-1-dark-mode);
    --fwc-chart-2: var(--tr-chart-2-dark-mode);
    --fwc-chart-3: var(--tr-chart-3);
    --fwc-data-positive-main: var(--tr-light-green);
    --fwc-card-background: var(--tr-background-grey-dark-mode);
  }
}

[data-cf="fwc-stock-story-growth"] {
  --int-text-xs-font-size: 16px;
  --int-text-xs-line-height: 24px;
}

[data-cf="fwc-stock-story-performance"] {
  --int-text-xs-font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-growth"] {
    --fwc-common-border: var(--table-border-dark-mode);
  }
}

[data-cf="fwc-stock-story-debt"] {
  --int-text-xs-font-size: 16px;
  --int-text-xs-line-height: 24px;
}

[data-cf="fwc-stock-story-outlook"] {
  --fwc-card-border: 1px solid var(--tr-medium-grey);
}

[data-cf="fwc-stock-story-forecast"] {
  --int-text-xs-font-size: 16px;
  --int-text-xs-line-height: 24px;
  --fwc-common-border: var(--table-border);
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-forecast"] {
    --fwc-common-border: var(--table-border-dark-mode);
    --fwc-text-contrast: var(--black);
  }
}

[data-cf="fwc-stock-story-overvalued"] {
  --int-text-xs-font-size: 16px;
  --int-text-xs-line-height: 24px;
  --fwc-common-border-darkest: var(--tr-medium-grey);
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-overvalued"] {
    --fwc-common-border-darkest: var(--tr-contrast-grey)
  }
}

[data-cf="fwc-stock-story-earnings"] {
  --fwc-card-background-inverse: var(--tr-hover-background-grey);
  --fwc-card-border-inverse: 1px solid var(--tr-medium-grey);
  --fwc-chart-1-inverse: var(--tr-chart-1);
  --fwc-chart-2-inverse: var(--tr-chart-2);
  --fwc-text-primary-inverse: var(--tr-dark-grey);
  --fwc-text-label-inverse: var(--tr-medium-grey);
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-earnings"] {
    --fwc-card-background-inverse: var(--tr-background-grey-dark-mode);
    --fwc-chart-1-inverse: var(--tr-chart-1-dark-mode);
    --fwc-chart-2-inverse: var(--tr-chart-2-dark-mode);
    --fwc-text-primary-inverse: var(--white);
    --fwc-text-label-inverse: var(--tr-contrast-grey);
    --fwc-action-disabled: var(--tr-action-disabled);
  }
}

[data-cf="fwc-stock-story-profile"] {
  --fwc-card-border: 1px solid var(--tr-medium-grey);
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-profile"] {
    --fwc-card-border: 1px solid var(--tr-background-grey-dark-mode);
    --fwc-data-positive-lightest: var(--tr-positive-lightest-dark-mode);
  }
}

[data-cf="fwc-stock-story-profitability"] {
  --fwc-card-border: 1px solid var(--tr-medium-grey);
  --fwc-common-fill: var(--tr-chart1-20);
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-profitability"] {
    --fwc-common-fill: var(--tr-chart1-20-dark-mode);
    --fwc-action-disabled: var(--tr-action-disabled);
  }
}

[data-cf="fwc-stock-story-dividends"] {
  --fwc-card-border: 1px solid var(--tr-medium-grey);
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-stock-story-dividends"] {
    --fwc-card-border: 1px solid var(--tr-background-grey-dark-mode);
    --fwc-data-positive-lightest: var(--tr-positive-lightest-dark-mode);
    --fwc-action-disabled: var(--tr-action-disabled);
    --fwc-mind-background: var(--tr-mind-background);
    --fwc-mind-main: var(--tr-mind-main);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-commodity-detailed-quote"],
  [data-theme="cfMarket"] [data-cf="fwc-currency-detailed-quote"],
  [data-theme="cfMarket"] [data-cf="fwc-government-bond-detailed-quote"],
  [data-theme="cfMarket"] [data-cf="fwc-indices-detailed-quote"] {
    --fwc-data-negative-lightest: var(--negative-lightest-dark-mode);
    --fwc-data-negative-main: var(--negative-main);
    --fwc-data-positive-lightest: var(--tr-positive-lightest-dark-mode);
    --fwc-data-positive-main: var(--tr-light-green);
    --fwc-common-fill: var(--tr-background-grey-dark-mode);
    --fwc-background-highlight-secondary: var(--tr-background-grey-dark-mode);
    --fwc-table-border: var(--table-border-dark-mode);
  }
}
[data-cf="fwc-equity-basic-chart"],
[data-cf="fwc-etf-basic-chart"],
[data-cf="fwc-mf-basic-chart"] {
  --fwc-tabs-press: var(--tr-grey-30);
  --fwc-text-secondary: var(--black);
  --fwc-font-medium: 700;
  --fwc-chart-fill-start: var(--tr-chart-fill-start);
  --fwc-chart-fill-stop: var(--tr-chart-fill-stop);
  --fwc-chart-indicator-hover-tooltip: var(--tr-contrast-grey);
  --fwc-card-border: 1px solid var(--tr-medium-grey);
  ;
}
 
[data-theme="cfMarket"] [data-cf="fwc-equity-basic-chart"],
[data-theme="cfMarket"] [data-cf="fwc-etf-basic-chart"],
[data-theme="cfMarket"] [data-cf="fwc-mf-basic-chart"] {
  --fwc-text-primary: var(--black);
  --fwc-text-contrast: var(--white);
}
 
@media (prefers-color-scheme: dark) {
  [data-theme="cfMarket"] [data-cf="fwc-equity-basic-chart"],
  [data-theme="cfMarket"] [data-cf="fwc-etf-basic-chart"],
  [data-theme="cfMarket"] [data-cf="fwc-mf-basic-chart"] {
    --fwc-text-primary: var(--white);
    --fwc-text-contrast: var(--black);
    --fwc-chart-indicator-hover-tooltip: var(--tr-medium-grey);
    --fwc-card-border: 1px solid var(--tr-contrast-grey);
  }
}

[data-cf="fwc-search"] {
  --int-text-xs-font-size: 14px;
  --int-text-xs-line-height: 20px;
  --int-text-s-font-size: 16px;
  --int-text-s-line-height: 24px;
}