/*
 * nextnano styling for PyData Sphinx Theme
 *
 * Intended for:
 *   pydata-sphinx-theme 0.20.x
 *   sphinx-design
 *
 * Do not import theme.css here. Sphinx loads this file after the theme CSS.
 */

/*
.bd-page-width {
  max-width: 100rem;
}

.bd-main .bd-content .bd-article-container {
  max-width: 100%;
}
*/

html{
  --teal-050: hsl(183, 81%, 97%);
  --teal-100: hsl(183, 81%, 94%);
  --teal-200: hsl(183, 81%, 88%);
  --teal-300: hsl(183, 81%, 79%);
  --teal-400: hsl(183, 81%, 55%);
  --teal-500: hsl(183, 81%, 39%);
  --teal-600: hsl(183, 81%, 27%);
  --teal-700: hsl(183, 81%, 19%);
  --teal-800: hsl(183, 81%, 11%);
  --teal-900: hsl(183, 81%, 6%);

  --violet-050: hsl(263, 81%, 97%);
  --violet-100: hsl(263, 81%, 94%);
  --violet-200: hsl(263, 81%, 88%);
  --violet-300: hsl(263, 81%, 79%);
  --violet-400: hsl(263, 81%, 55%);
  --violet-500: hsl(263, 81%, 39%);
  --violet-600: hsl(263, 81%, 27%);
  --violet-700: hsl(263, 81%, 19%);
  --violet-800: hsl(263, 81%, 11%);
  --violet-900: hsl(263, 81%, 6%);

  --pink-050: hsl(308, 81%, 97%);
  --pink-100: hsl(308, 81%, 94%);
  --pink-200: hsl(308, 81%, 88%);
  --pink-300: hsl(308, 81%, 79%);
  --pink-400: hsl(308, 81%, 55%);
  --pink-500: hsl(308, 81%, 39%);
  --pink-600: hsl(308, 81%, 27%);
  --pink-700: hsl(308, 81%, 19%);
  --pink-800: hsl(308, 81%, 11%);
  --pink-900: hsl(308, 81%, 6%);

  --gray-050: hsl(183, 1%, 97%);
  --gray-100: hsl(183, 1%, 94%);
  --gray-200: hsl(183, 1%, 88%);
  --gray-300: hsl(183, 1%, 79%);
  --gray-400: hsl(183, 1%, 55%);
  --gray-500: hsl(183, 1%, 39%);
  --gray-600: hsl(183, 1%, 27%);
  --gray-700: hsl(183, 1%, 19%);
  --gray-800: hsl(183, 1%, 11%);
  --gray-900: hsl(183, 1%, 6%);

  --green-050: hsl(120, 81%, 97%);
  --green-100: hsl(120, 81%, 94%);
  --green-200: hsl(120, 81%, 88%);
  --green-300: hsl(120, 81%, 79%);
  --green-400: hsl(120, 81%, 55%);
  --green-500: hsl(120, 81%, 39%);
  --green-600: hsl(120, 81%, 27%);
  --green-700: hsl(120, 81%, 19%);
  --green-800: hsl(120, 81%, 11%);
  --green-900: hsl(120, 81%, 6%);

  --fire-050: hsl(38, 81%, 97%);
  --fire-100: hsl(38, 81%, 94%);
  --fire-200: hsl(38, 81%, 88%);
  --fire-300: hsl(38, 81%, 79%);
  --fire-400: hsl(38, 81%, 55%);
  --fire-500: hsl(38, 81%, 39%);
  --fire-600: hsl(38, 81%, 27%);
  --fire-700: hsl(38, 81%, 19%);
  --fire-800: hsl(38, 81%, 11%);
  --fire-900: hsl(38, 81%, 6%);

  --red-050: hsl(350, 81%, 97%);
  --red-100: hsl(350, 81%, 94%);
  --red-200: hsl(350, 81%, 88%);
  --red-300: hsl(350, 81%, 79%);
  --red-400: hsl(350, 81%, 55%);
  --red-500: hsl(350, 81%, 39%);
  --red-600: hsl(350, 81%, 27%);
  --red-700: hsl(350, 81%, 19%);
  --red-800: hsl(350, 81%, 11%);
  --red-900: hsl(350, 81%, 6%);
}

html[data-theme="light"] {
  --pst-color-primary: var(--teal-500);
  --pst-color-primary-bg: var(--teal-100);
  --pst-color-secondary: var(--teal-500);
  --pst-color-secondary-bg: var(--teal-100);
  --pst-color-accent: var(--pink-500);
  --pst-color-accent-bg: var(--pink-100);

  --pst-color-success: var(--green-500);
  --pst-color-success-bg: var(--green-100);
  --pst-color-info: var(--gray-500);
  --pst-color-info-bg: var(--gray-100);
  --pst-color-warning: var(--fire-500);
  --pst-color-warning-bg: var(--fire-100);
  --pst-color-danger: var(--red-500);
  --pst-color-danger-bg: var(--red-100);

  --pst-color-inline-code: var(--pink-600);
  --pst-color-link-higher-contrast: var(--teal-600);

  --pst-color-target: var(--fire-500);
  --pst-color-table-row-hover: var(--violet-200);

}

html[data-theme="dark"] {

  --pst-color-primary: var(--teal-500);
  --pst-color-primary-bg: var(--teal-800);
  --pst-color-secondary: var(--teal-500);
  --pst-color-secondary-bg: var(--teal-800);
  --pst-color-accent: var(--pink-500);
  --pst-color-accent-bg: var(--pink-100);

  --pst-color-success: var(--green-500);
  --pst-color-success-bg: var(--green-800);
  --pst-color-info: var(--gray-500);
  --pst-color-info-bg: var(--gray-800);
  --pst-color-warning: var(--fire-500);
  --pst-color-warning-bg: var(--fire-800);
  --pst-color-danger: var(--red-500);
  --pst-color-danger-bg: var(--red-800);

  --pst-color-inline-code: var(--pink-300);
  --pst-color-link-higher-contrast: var(--teal-500);
  
  --pst-color-target: var(--fire-500);
  --pst-color-table-row-hover: var(--violet-700);

}

/* Atlassian support widget:
   keep its iframe in the light color scheme so its transparent
   canvas remains transparent on both light and dark host pages. */
iframe[name="JSD widget"],
iframe[src*="jsd-widget.atlassian.com"] {
  color-scheme: light !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}