/* ITP Mining color system. Source: approved design variables. */
:root {
  /* Background */
  --color-background-main: #0f182e;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #bac1d4;
  --color-text-secondary-fade: rgb(186 193 212 / 60%);
  --color-error: #c10000;
  --Error: var(--color-error);

  /* Base */
  --color-white-100: #ffffff;
  --color-white-0: rgb(255 255 255 / 0%);
  --color-white-30: rgb(255 255 255 / 30%);
  --color-white-40: rgb(255 255 255 / 40%);
  --color-white-80: rgb(255 255 255 / 80%);

  /* Button */
  --color-button-primary-up: #026dff;
  --color-button-primary-down: #00d7ff;
  --color-button-secondary-up: #14c3eb;
  --color-button-secondary-down: #1459eb;
  --color-button-shine-dark-part: rgb(15 24 46 / 20%);
  --color-button-shine-light-part: rgb(46 167 255 / 50%);
  --color-button-shine-dark-5: rgb(15 24 46 / 5%);
  --color-button-shine-dark-10: rgb(15 24 46 / 10%);

  /* Decor */
  --color-decor-line-1-0: rgb(51 169 255 / 0%);
  --color-decor-line-1-8: rgb(51 169 255 / 8%);
  --color-decor-line-1-15: rgb(51 169 255 / 15%);
  --color-decor-line-1-40: rgb(51 169 255 / 40%);
  --color-decor-line-1: #33a9ff;
  --color-decor-line-2: #01eeff;
  --color-decor-line-3: #029eff;
  --color-decor-mask-layer: #b5e9ff;
}

body {
  background-color: var(--color-background-main);
  color: var(--color-text-primary);
}

.hero > .ticker {
  background: var(--color-background-main);
}

/* Solid text colors: Primary, Secondary and Secondary Fade only. */
html:not(.theme-reality) body,
html:not(.theme-reality) h1,
html:not(.theme-reality) h2,
html:not(.theme-reality) h3,
html:not(.theme-reality) h4,
html:not(.theme-reality) strong,
html:not(.theme-reality) button,
html:not(.theme-reality) input,
html:not(.theme-reality) textarea,
html:not(.theme-reality) select,
html:not(.theme-reality) .desktop-nav a,
html:not(.theme-reality) .nav-dropdown-toggle,
html:not(.theme-reality) .nav-right > a,
html:not(.theme-reality) .lang-dropdown-toggle,
html:not(.theme-reality) .lang-dropdown-menu a.active,
html:not(.theme-reality) .service-tab.active,
html:not(.theme-reality) .demo-tab.active,
html:not(.theme-reality) .service-flow-node.active,
html:not(.theme-reality) .metric b,
html:not(.theme-reality) .metric-card b,
html:not(.theme-reality) .code-inputs input,
html:not(.theme-reality) .galaxy-button__label {
  color: var(--color-text-primary);
}

html:not(.theme-reality) p,
html:not(.theme-reality) li,
html:not(.theme-reality) label,
html:not(.theme-reality) small,
html:not(.theme-reality) cite,
html:not(.theme-reality) figcaption,
html:not(.theme-reality) .type-text,
html:not(.theme-reality) .type-descriptor-1,
html:not(.theme-reality) .type-descriptor-2,
html:not(.theme-reality) .eyebrow,
html:not(.theme-reality) .section-heading p,
html:not(.theme-reality) .detail-lead,
html:not(.theme-reality) .nav-dropdown-menu a,
html:not(.theme-reality) .lang-dropdown-menu a,
html:not(.theme-reality) .lang-dropdown-toggle i,
html:not(.theme-reality) .product-code,
html:not(.theme-reality) .text-link,
html:not(.theme-reality) .article-meta,
html:not(.theme-reality) .news-date,
html:not(.theme-reality) .num,
html:not(.theme-reality) .mini-link,
html:not(.theme-reality) .back-link,
html:not(.theme-reality) .case-label,
html:not(.theme-reality) .characteristics-heading,
html:not(.theme-reality) .service-tab,
html:not(.theme-reality) .service-tab small,
html:not(.theme-reality) .service-flow-node,
html:not(.theme-reality) .service-flow-meta span,
html:not(.theme-reality) .flow-pill,
html:not(.theme-reality) .direction-expanded .num,
html:not(.theme-reality) .direction-collapsed span,
html:not(.theme-reality) .solution-arrow,
html:not(.theme-reality) .browser-url,
html:not(.theme-reality) .metric span,
html:not(.theme-reality) .logo-group-title,
html:not(.theme-reality) .char-counter,
html:not(.theme-reality) .select-shell::after,
html:not(.theme-reality) .form-note,
html:not(.theme-reality) .product-category,
html:not(.theme-reality) .content-tab,
html:not(.theme-reality) .detail-table-row span,
html:not(.theme-reality) .presentation-access h3,
html:not(.theme-reality) .presentation-message,
html:not(.theme-reality) .footer-links a,
html:not(.theme-reality) .footer-bottom a,
html:not(.theme-reality) .globe-point,
html:not(.theme-reality) .globe-legend,
html:not(.theme-reality) .metric-card small,
html:not(.theme-reality) .metric-card a:not(.ui-link) {
  color: var(--color-text-secondary);
}

html:not(.theme-reality) .footer-brand p,
html:not(.theme-reality) .footer-navigation .footer-links a {
  color: var(--color-text-primary);
}

html:not(.theme-reality) input::placeholder,
html:not(.theme-reality) textarea::placeholder,
html:not(.theme-reality) .ticker-track,
html:not(.theme-reality) .ticker .type-running-line,
html:not(.theme-reality) .footer-bottom,
html:not(.theme-reality) .globe-credit {
  color: var(--color-text-secondary-fade);
}

html:not(.theme-reality) #about .about-lead {
  color: var(--color-text-primary);
}

html:not(.theme-reality) #products .product-slide-details .text-link,
html:not(.theme-reality) .map-layout .metric-card__products-cta,
html:not(.theme-reality) .product-detail-card .ui-link {
  color: var(--color-text-primary);
}