:root {
    --primary-1: #3443F4; // blue
    --primary-2: #7AF0FE; // pale blue
    --primary-3: #14003D; // dark purple
    --primary-3-border: #14003D1F;
    --secondary-1: #FEC7EE; // light pink
    --secondary-2: #7545FB; // purple
    --secondary-3: #D0CFEE;  // very light purple
    --secondary-3-border: #D0CFEE2E;
    --tertiary-1: #81FEA0;   // pale green
    --tertiary-2: #01A178;   // green
    --tertiary-3: #FE5B3C;   // orange
    --tertiary-4: #F6EB61;   // yellow
    --desaturated-primary-3: #190d30; // desaturated dark purple
    --desaturated-secondary-1: #876ad6; // desaturated light purple
}

@mixin light-mode {
    color-scheme: light;
    --a-original-color: inherit;
    --active-element-background: #f3f3f3;
    --active-element-shadow: var(--secondary-2);
    --active-link-color: var(--secondary-2);
    --article-link-color: var(--primary-1);
    --article-link-secondary-color: var(--primary-2);
    --basics-card-background: inherit;
    --basics-card-border: var(--primary-3-border);
    --blockquote-background: var(--secondary-3-border);
    --blockquote-link-color: var(--tertiary-3);
    --blockquote-border: var(--secondary-2);
    --blockquote-color: var(--secondary-1);
    --board-background-color: #FAFBFC;
    --body-background: #FFFFFF;
    --body-color: var(--primary-3);
    --body-table-color: inherit;
    --bs-table-bg: inherit;
    --caption-color: var(--primary-3);
    --caption-title-color: var(--primary-3);
    --card-background-0: var(--primary-2);
    --card-background-1: var(--secondary-2);
    --center-title-color: var(--primary-3);
    --code-color: var(--primary-3-border);
    --contact-us-button-background: var(--primary-1);
    --contact-us-button-color: #ffffff;
    --docs-navigation-border: var(--primary-2);
    --docs-navigation-button-border: var(--primary-3-border);
    --docs-navigation-button-color: var(--primary-3);
    --docs-navigation-color: inherit;
    --expand-button-background: #f3f3f3;
    --expand-button-border: inherit;
    --expand-button-color: #000000;
    --footer-background: #FAFBFC;
    --footer-item-color: var(--primary-3);
    --footer-item-hover-color: var(--primary-1);
    --footer-title-color: var(--primary-3);
    --form-check-input-background: var(--secondary-2);
    --form-check-input-checked-background: inherit;
    --form-check-input-checked-border: inherit;
    --form-check-input-color: var(--secondary-1);
    --form-check-input-focus-border: inherit;
    --header-background: #FFFFFF;
    --home-background: #FFFFFF;
    --index-logo-color: #eeeeee;
    --language-selector-color: #000000;
    --leftnav-border: var(--primary-3-border);
    --navbar-contact-border: var(--secondary-3);
    --navbar-contact-color: var(--primary-1);
    --note-deprecated: var(--tertiary-4);
    --note-notice: var(--secondary-2);
    --note-warning: -var(--tertiary-3);
    --note-cta: var(--secondary-1);
    --note-cta-background: var(--primary-1);
    --note-cta-link: var(--tertiary-1);
    --notification-background: #0e0e0e;
    --notification-color: var(--secondary-1);
    --offcanvas-close-color: var(--primary-3);
    --page-link-active-color: var(--desaturated-primary-3);
    --page-link-color: var(--primary-3);
    --pills-icon: var(--primary-1);
    --placeholder-color: var(--secondary-1);
    --pre-container-background: #ffffff;
    --pre-container-border: #dcdcdc;
    --righthand-title-color: var(--primary-3);
    --search-background: #F5F5FB;
    --search-box-background: inherit;
    --search-slash-border: #dcdcdc;
    --segmented-button-background: #F5F5FB;
    --segmented-button-checked: var(--primary-1);
    --segmented-button-color: #8C8C8C;
    --severity-background: #fff;
    --severity-border: #DCDCDC;
    --severity-color: var(--primary-3);
    --severity-hover-background: #EBECFE;
    --severity-search-background: #F3F3F3;
    --severity-search-border: var(--primary-1);
    --sidebar-bottom-item-color: var(--primary-3);
    --sidebar-bottom-item-hover-color: var(--primary-1);
    --sidebar-category-color: var(--primary-3);
    --sidebar-item-active-color: var(--primary-3);
    --sidebar-item-color: var(--primary-3);
    --sidebar-item-list-item-selected-background: var(--secondary-3);
    --sidebar-item-top-color: var(--primary-3);
    --step-background: var(--secondary-3-border);
    --suggestion-description-color: var(--primary-3);
    --suggestion-title-color: var(--primary-3);
    --suggestions-background: #FAFBFC;
    --suggestions-border: var(--primary-3-border);
    --suggestions-hover-background: var(--secondary-3);
    --tab-active-color: var(--primary-3);
    --table-header-background: var(--secondary-2);
    --table-row-hover-background: var(--secondary-1);
    --table-row-background: #FFF;
    --table-row-border-color: var(--secondary-3);
    --table-vulnerability-color: var(--primary-3);
    --tabs-active-color: var(--primary-1);
    --tabs-color: var(--primary-3);
    --tag-background: var(--secondary-3);
    --tag-color: var(--primary-3);
    --terminal-background: #ffffff;
    --terminal-border: var(--primary-2)!;
    --terminal-color: var(--primary-3);
    --terminal-handle: #dcdcdc;
    --terminal-title-color: var(--primary-3);
    --toggle-icon-color: inherit;
    --tooltip-background: #232323;
    --tooltip-color: #ffffff;
    --tooltip-container-color: inherit;
    --topic-card-hover: #f5f0f0;
    --tutorial-divider-color: var(--secondary-1);
    --tutorial-hover-color: var(--primary-1);
    --watch-btn-border: #dcdcdc;
    --watch-btn-color: var(--primary-3);
    --watch-btn-hover-background: #f5f0f0;
    --info-icon-url: url("/iconography/linky.svg");
    --chevron-icon-url: url("/chevron.svg");
    --search-icon-url: url("/search.svg");
    --copy-icon-url: url("/copy.svg");
    --copy-icon-opposite-url: url("/copy-dark.svg");
    --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><path d='M10,10 l15,15 l15,-15' fill='none' stroke='rgb(28,28,28)' stroke-width='7'></path></svg>");
}

@mixin dark-mode {
    color-scheme: dark;
    --a-original-color: #c5c5c5;
    --active-element-background: #ffffff29;
    --active-element-shadow: var(--primary-2);
    --active-link-color: var(--secondary-1);
    --article-link-color: var(--primary-2);
    --article-link-secondary-color: var(--primary-1);
    --basics-card-background: -var(--desaturated-primary-3);
    --basics-card-border: var(--secondary-3-border);
    --blockquote-background: var(--secondary-3-border);
    --blockquote-border: var(--secondary-2);
    --blockquote-color: var(--primary-3);
    --blockquote-link-color: var(--secondary-2);
    --board-background-color: #0F0A24;
    --body-background: #0A0618;
    --body-color: var(--secondary-3);
    --body-table-color: inherit;
    --bs-table-bg: inherit;
    --caption-color: var(--secondary-3);
    --caption-title-color: var(--secondary-3);
    --card-background-0: rgba(117, 69, 251, 0.15); // Muted purple
    --card-background-1: rgba(52, 67, 244, 0.10); // Muted blue
    --center-title-color: var(--secondary-3);
    --code-color: var(--secondary-3-border);
    --contact-us-button-background: var(--secondary-2);
    --contact-us-button-color: var(--primary-2);
    --docs-navigation-border: var(--secondary-2);
    --docs-navigation-button-border: var(--secondary-3-border);
    --docs-navigation-button-color: #ffffff;
    --docs-navigation-color: #ffffff;
    --expand-button-background: #232323;
    --expand-button-border: transparent;
    --expand-button-color: #ffffff;
    --footer-background: var(--body-background);
    --footer-item-color: var(--secondary-3);
    --footer-item-hover-color: var(--primary-2);
    --footer-title-color: var(--secondary-3);
    --form-check-input-background: var(--secondary-2);
    --form-check-input-checked-background: var(--secondary-2);
    --form-check-input-checked-border: var(--primary-2);
    --form-check-input-color: #ffffff;
    --form-check-input-focus-border: var(--primary-2);
    --header-background: #0A0618;
    --home-background: #0A0618;
    --index-logo-color: var(--secondary-2);
    --language-selector-color: #ffffff;
    --leftnav-border: var(--secondary-3-border);
    --navbar-contact-border: var(--secondary-2);
    --navbar-contact-color: var(--secondary-2);
    --note-cta: var(--primary-3);
    --note-cta-background: var(--secondary-3);
    --note-cta-link: var(--secondary-2);
    --note-deprecated: var(--tertiary-2);
    --note-notice: var(--tertiary-1);
    --note-warning: var(--secondary-2);
    --notification-background: var(--secondary-1);
    --notification-color: var(--primary-3);
    --offcanvas-close-color: var(--secondary-1);
    --page-link-active-color: var(--primary-2);
    --page-link-color: var(--secondary-1);
    --pills-icon: var(--primary-2);
    --placeholder-color: #c5c5c5;
    --pre-container-background: #151030;
    --pre-container-border: #d0cfee2e;
    --righthand-title-color: #8c8c8c;
    --search-background: #0F0A24;
    --search-box-background: #0F0A24;
    --search-slash-border: var(--secondary-2);
    --segmented-button-background: #232323;
    --segmented-button-checked: var(--primary-1);
    --segmented-button-color: #8C8C8C;
    --severity-background: #0E0E0E;
    --severity-border: var(--secondary-2);
    --severity-color: #FFF;
    --severity-hover-background: #0E0E0E;
    --severity-search-background: #232323;
    --sidebar-bottom-item-color: #c5c5c5;
    --sidebar-bottom-item-hover-color: var(--primary-2);
    --sidebar-category-color: #8c8c8c;
    --sidebar-item-active-color: #ffffff;
    --sidebar-item-color: #8c8c8c;
    --sidebar-item-list-item-selected-background: #ffffff29;
    --sidebar-item-top-color: #c5c5c5;
    --step-background: var(--secondary-3-border);
    --suggestion-description-color: #ffffff7f;
    --suggestion-title-color: #ffffff;
    --suggestions-background: #151030;
    --suggestions-border: var(--secondary-3-border);
    --suggestions-hover-background: #ffffff29;
    --tab-active-color: #ffffff;
    --table-header-background: #0E0E0E;
    --table-row-border-color: var(--secondary-2);
    --table-row-background: #040404;
    --table-row-hover-background: #0E0E0E;
    --table-vulnerability-color: #fff;
    --tabs-active-color: var(--primary-2);
    --tabs-color: #8c8c8c;
    --tag-background: var(--secondary-3);
    --tag-color: #232323;
    --terminal-background: #0e0e0e;
    --terminal-border: var(--secondary-2);
    --terminal-color: #ffffff;
    --terminal-handle: #d9d9d9;
    --terminal-title-color: #ffffff;
    --toggle-icon-color: #c5c5c5;
    --tooltip-background: #232323;
    --tooltip-color: #ffffff;
    --tooltip-container-color: #ffffff;
    --topic-card-hover: #232323;
    --tutorial-divider-color: inherit;
    --tutorial-hover-color: #ffffff;
    --watch-btn-border: var(--secondary-2);
    --watch-btn-color: #ffffff;
    --watch-btn-hover-background: #232323;
    --info-icon-url: url("/iconography/blue/linky.svg");
    --chevron-icon-url: url("/chevron-dark.svg");
    --search-icon-url: url("/search-dark.svg");
    --copy-icon-url: url("/copy-dark.svg");
    --copy-icon-opposite-url: url("/copy.svg");
    --chevron-icon-url: url("/chevron-dark.svg");
    --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><path d='M10,10 l15,15 l15,-15' fill='none' stroke='white' stroke-width='7'></path></svg>");
}

:root {
    @include light-mode;
}

@media (prefers-color-scheme: dark) {
    :root {
        @include dark-mode;
    }
}

:root[mode-loaded] {
    @include light-mode;
}

:root[mode-loaded][data-dark-mode] {
    @include dark-mode;
}
