@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --tradeval-teal: #217b64;
  --tradeval-teal-dark: #1a5c4f;
  --tradeval-teal-light: #e8f5f1;
  --tradeval-coral: #de7e5d;
  --tradeval-indigo: #0a0f51;
  --tradeval-teal-on-surface: var(--tradeval-teal);

  --tradeval-brand-bg: var(--tradeval-indigo);
  --tradeval-brand-border: #1e293b;
  --tradeval-brand-text: #ffffff;
  --tradeval-brand-muted: rgba(255, 255, 255, 0.6);

  --pf-v5-global--primary-color--100: var(--tradeval-teal);
  --pf-v5-global--primary-color--200: var(--tradeval-teal-dark);
  --pf-v5-global--active-color--100: var(--tradeval-teal);
  --pf-v5-global--active-color--400: var(--tradeval-teal-light);
  --pf-v5-global--link--Color: var(--tradeval-teal-on-surface);
  --pf-v5-global--link--Color--hover: var(--tradeval-teal-dark);
  --pf-v5-global--FontFamily--heading--sans-serif: "Montserrat", var(--pf-v5-global--FontFamily--sans-serif);
}

:root.pf-v5-theme-dark {
  --tradeval-teal-light: #1f3a33;
  --tradeval-teal-on-surface: #4fb596;
  --pf-v5-global--link--Color--hover: #7fcbb4;
  --tradeval-brand-bg: #1d2746;
  --tradeval-brand-border: #273151;
  --tradeval-brand-text: #eeeeee;
  --tradeval-brand-muted: rgba(238, 238, 238, 0.6);

  --pf-v5-global--BackgroundColor--100: #0d1023;
  --pf-v5-global--BackgroundColor--150: #11193d;
  --pf-v5-global--BackgroundColor--200: #05061d;
  --pf-v5-global--BackgroundColor--300: #18203a;
  --pf-v5-global--BackgroundColor--400: #1d2746;
  --pf-v5-global--BackgroundColor--dark-100: #0d1023;
  --pf-v5-global--BackgroundColor--dark-200: #05061d;
  --pf-v5-global--BackgroundColor--dark-300: #18203a;
  --pf-v5-global--BackgroundColor--dark-400: #1d2746;
  --pf-v5-global--BackgroundColor--light-100: #0d1023;
  --pf-v5-global--BackgroundColor--light-200: #05061d;
  --pf-v5-global--BackgroundColor--light-300: #18203a;

  --pf-v5-global--BorderColor--100: #273151;
  --pf-v5-global--BorderColor--200: #273151;
  --pf-v5-global--BorderColor--300: #364163;
  --pf-v5-global--BorderColor--400: #798093;
  --pf-v5-global--BorderColor--dark-100: #273151;
  --pf-v5-global--BorderColor--light-100: #273151;

  --pf-v5-global--disabled-color--100: #8f8f8f;
  --pf-v5-global--disabled-color--200: #273151;
  --pf-v5-global--disabled-color--300: #798093;

  --pf-v5-global--Color--100: #eeeeee;
  --pf-v5-global--Color--200: #8f8f8f;
  --pf-v5-global--Color--400: #808080;
  --pf-v5-global--Color--dark-100: #eeeeee;
  --pf-v5-global--Color--dark-200: #8f8f8f;
  --pf-v5-global--Color--light-100: #eeeeee;
  --pf-v5-global--Color--light-200: #8f8f8f;
}

.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--tradeval-brand-bg);
  --pf-v5-c-masthead--Color: var(--tradeval-brand-text);
  --pf-v5-c-button--m-plain--Color: var(--tradeval-brand-text);
  --pf-v5-c-button--m-plain--hover--Color: var(--tradeval-brand-text);
  --pf-v5-c-button--m-plain--focus--Color: var(--tradeval-brand-text);
  --pf-v5-c-menu-toggle--Color: var(--tradeval-brand-text);
  border-bottom: 2px solid var(--tradeval-coral);
  color: var(--tradeval-brand-text);
}

.pf-v5-c-masthead,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content {
  background-color: var(--tradeval-brand-bg);
}

.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v5-c-masthead .pf-v5-c-toolbar__item {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
  background-color: transparent;
}

.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text {
  --pf-v5-c-button--m-plain--Color: var(--tradeval-brand-text);
  --pf-v5-c-menu-toggle--m-plain--Color: var(--tradeval-brand-text);
  color: var(--tradeval-brand-text);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--BorderColor: var(--tradeval-brand-muted);
}

.pf-v5-c-masthead__brand,
.pf-v5-c-brand {
  max-height: 2rem;
  width: auto;
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--tradeval-brand-bg);
  --pf-v5-c-page__sidebar--Width: 18rem;
  --pf-v5-c-page__sidebar--md--Width: 18rem;
  border-right: 1px solid var(--tradeval-brand-border);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1rem 0;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title {
  padding: 0.5rem 0.75rem;
  color: var(--tradeval-brand-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  gap: 0.75rem;
  height: 2.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--tradeval-brand-text);
  font-size: 0.875rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link::before,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after {
  display: none;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus {
  background-color: var(--tradeval-teal);
  color: #ffffff;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"] {
  background-color: var(--tradeval-teal);
  color: #ffffff;
  font-weight: 500;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link {
  padding-left: 2.25rem;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--tradeval-teal);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--tradeval-teal-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--tradeval-teal-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--tradeval-teal-dark);
}

.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--tradeval-teal-on-surface);
  --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
}

.pf-v5-c-tabs__link:hover,
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  --pf-v5-c-tabs__link--Color: var(--tradeval-teal-on-surface);
  --pf-v5-c-tabs__item--m-current__link--Color: var(--tradeval-teal-on-surface);
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: var(--tradeval-teal-on-surface);
}

.pf-v5-c-title,
.pf-v5-c-page__main-title {
  font-family: "Montserrat", var(--pf-v5-global--FontFamily--sans-serif);
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--tradeval-teal);
}
