@stackoverflow/stacks 0.73.1 → 0.76.0

package/lib/css/exports/_stacks-constants-colors.less

@@ -1,1098 +1,1112 @@
-//
-//  STACK OVERFLOW
-//  CONSTANTS -- COLORS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   Legacy Less color variables
-//  ----------------------------------------------------------------------------
-//  --  Base Hue Values
-@white-h: 0;
-@black-h: 210;
-@orange-h: 27;
-@yellow-h: 47;
-@green-h: 140;
-@blue-h: 206;
-@powder-h: 205;
-@red-h: 358;
-@fog-h: 180;
-@gold-h: 48;
-@silver-h: 210;
-@bronze-h: 28;
-
-//  --  Base Saturation Values
-@black-s: 8%;
-
-//  --  Primary Colors
-@white: hsl(@white-h, 0%, 100%);
-@black: hsl(@black-h, @black-s, 5%);
-@orange: hsl(@orange-h, 90%, 55%);
-
-//  --  Accent Colors
-@yellow: hsl(@yellow-h, 83%, 91%);
-@green: hsl(@green-h, 40%, 55%);
-@blue: hsl(@blue-h, 100%, 40%);
-@powder: hsl(@powder-h, 46%, 92%);
-@red: hsl(@red-h, 62%, 52%);
-@fog: hsl(@fog-h, 7%, 97%);
-
-// Black
-@black-025: hsl(@black-h, @black-s, 97.5%);
-@black-050: hsl(@black-h, @black-s, 95%);
-@black-075: hsl(@black-h, @black-s, 90%);
-@black-100: hsl(@black-h, @black-s, 85%);
-@black-150: hsl(@black-h, @black-s, 80%);
-@black-200: hsl(@black-h, @black-s, 75%);
-@black-300: hsl(@black-h, @black-s, 65%);
-@black-350: hsl(@black-h, @black-s, 60%);
-@black-400: hsl(@black-h, @black-s, 55%);
-@black-500: hsl(@black-h, @black-s, 45%);
-@black-600: hsl(@black-h, @black-s, 35%);
-@black-700: hsl(@black-h, @black-s, 25%);
-@black-750: hsl(@black-h, @black-s, 20%);
-@black-800: hsl(@black-h, @black-s, 15%);
-@black-900: @black;
-
-// Orange
-@orange-050: hsl(@orange-h, 100%, 97%);
-@orange-100: hsl(@orange-h, 95%, 90%);
-@orange-200: hsl(@orange-h, 90%, 83%);
-@orange-300: hsl(@orange-h, 90%, 70%);
-@orange-400: @orange;
-@orange-500: hsl(@orange-h, 90%, 50%);
-@orange-600: hsl(@orange-h, 90%, 45%);
-@orange-700: hsl(@orange-h, 90%, 39%);
-@orange-800: hsl(@orange-h, 87%, 35%);
-@orange-900: hsl(@orange-h, 80%, 30%);
-
-// Blue
-@blue-050: hsl(@blue-h, 100%, 97%);
-@blue-100: hsl(@blue-h, 96%, 90%);
-@blue-200: hsl(@blue-h, 93%, 83.5%);
-@blue-300: hsl(@blue-h, 90%, 69.5%);
-@blue-400: hsl(@blue-h, 85%, 57.5%);
-@blue-500: hsl(@blue-h, 100%, 52%);
-@blue-600: @blue;
-@blue-700: hsl(@blue-h + 3, 100%, 37.5%);
-@blue-800: hsl(@blue-h + 3, 100%, 32%);
-@blue-900: hsl(@blue-h + 3, 100%, 26%);
-
-// Powder
-@powder-050: hsl(@powder-h, 47%, 97%);
-@powder-100: @powder;
-@powder-200: hsl(@powder-h, 53%, 88%);
-@powder-300: hsl(@powder-h, 57%, 81%);
-@powder-400: hsl(@powder-h, 56%, 76%);
-@powder-500: hsl(@powder-h, 41%, 63%);
-@powder-600: hsl(@powder-h, 36%, 53%);
-@powder-700: hsl(@powder-h, 47%, 42%);
-@powder-800: hsl(@powder-h, 46%, 32%);
-@powder-900: hsl(@powder-h, 46%, 22%);
-
-// Green
-@green-025: hsl(@green-h, 42%, 95%);
-@green-050: hsl(@green-h, 40%, 90%);
-@green-100: hsl(@green-h, 40%, 85%);
-@green-200: hsl(@green-h, 40%, 75%);
-@green-300: hsl(@green-h, 40%, 65%);
-@green-400: @green;
-@green-500: hsl(@green-h, 40%, 47%);
-@green-600: hsl(@green-h, 40%, 40%);
-@green-700: hsl(@green-h, 41%, 31%);
-@green-800: hsl(@green-h, 40%, 27%);
-@green-900: hsl(@green-h, 40%, 20%);
-
-// Yellow
-@yellow-050: hsl(@yellow-h, 87%, 94%);
-@yellow-100: @yellow;
-@yellow-200: hsl(@yellow-h, 65%, 84%);
-@yellow-300: hsl(@yellow-h, 69%, 69%);
-@yellow-400: hsl(@yellow-h, 79%, 58%);
-@yellow-500: hsl(@yellow-h, 73%, 50%);
-@yellow-600: hsl(@yellow-h, 76%, 46%);
-@yellow-700: hsl(@yellow-h, 79%, 40%);
-@yellow-800: hsl(@yellow-h, 82%, 34%);
-@yellow-900: hsl(@yellow-h, 84%, 28%);
-
-// Red
-@red-050: hsl(@red-h, 75%, 97%);
-@red-100: hsl(@red-h, 76%, 90%);
-@red-200: hsl(@red-h, 74%, 83%);
-@red-300: hsl(@red-h, 70%, 70%);
-@red-400: hsl(@red-h, 68%, 59%);
-@red-500: @red;
-@red-600: hsl(@red-h, 62%, 47%);
-@red-700: hsl(@red-h, 64%, 41%);
-@red-800: hsl(@red-h, 64%, 35%);
-@red-900: hsl(@red-h, 67%, 29%);
-
-//  $  BADGES
-//  ----------------------------------------------------------------------------
-@gold: hsl(@gold-h, 100%, 50%);
-@gold-lighter: hsl(@gold-h, 100%, 91%);
-@gold-darker: hsl(@gold-h - 3, 100%, 47%);
-
-@silver: hsl(@silver-h, 6%, 72%);
-@silver-lighter: hsl(@silver-h, 0%, 91%);
-@silver-darker: hsl(@silver-h, 3%, 61%);
-
-@bronze: hsl(@bronze-h, 38%, 67%);
-@bronze-lighter: hsl(@bronze-h, 40%, 92%);
-@bronze-darker: hsl(@bronze-h, 31%, 52%);
-
-//  $  SHADOWS
-//  ----------------------------------------------------------------------------
-@bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
-@bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
-@bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
-
-//  $  SCROLLBARS
-//  ----------------------------------------------------------------------------
-@scrollbar: hsla(0, 0%, 0%, 0.2);
-
-//  ============================================================================
-//  $   CSS Variable Colors
-//  ----------------------------------------------------------------------------
-
-.generate-calculated-themed-variables(@primary, @designation: primary, @theme: base) {
-    // Split into h/s/l/a values
-    --theme-@{theme}-@{designation}-color-h: hue(@primary);
-    --theme-@{theme}-@{designation}-color-s: saturation(@primary);
-    --theme-@{theme}-@{designation}-color-l: lightness(@primary);
-
-    // Split into r/g/b values
-    --theme-@{theme}-@{designation}-color-r: red(@primary);
-    --theme-@{theme}-@{designation}-color-g: green(@primary);
-    --theme-@{theme}-@{designation}-color-b: blue(@primary);
-}
-
-.generate-themed-variables(@theme: theme) {
-    // Primary color
-    // Split into h/s/l/a values
-    --theme-primary-color-h: var(~"--@{theme}-primary-color-h", var(--theme-base-primary-color-h));
-    --theme-primary-color-s: var(~"--@{theme}-primary-color-s", var(--theme-base-primary-color-s));
-    --theme-primary-color-l: var(~"--@{theme}-primary-color-l", var(--theme-base-primary-color-l));
-
-    // Split into r/g/b values
-    --theme-primary-color-r: var(~"--@{theme}-primary-color-r", var(--theme-base-primary-color-r));
-    --theme-primary-color-g: var(~"--@{theme}-primary-color-g", var(--theme-base-primary-color-g));
-    --theme-primary-color-b: var(~"--@{theme}-primary-color-b", var(--theme-base-primary-color-b));
-
-    // Secondary color
-    // Split into h/s/l/a values
-    --theme-secondary-color-h: var(~"--@{theme}-secondary-color-h", var(--theme-base-secondary-color-h));
-    --theme-secondary-color-s: var(~"--@{theme}-secondary-color-s", var(--theme-base-secondary-color-s));
-    --theme-secondary-color-l: var(~"--@{theme}-secondary-color-l", var(--theme-base-secondary-color-l));
-
-    // Split into r/g/b values
-    --theme-secondary-color-r: var(~"--@{theme}-secondary-color-r", var(--theme-base-secondary-color-r));
-    --theme-secondary-color-g: var(~"--@{theme}-secondary-color-g", var(--theme-base-secondary-color-g));
-    --theme-secondary-color-b: var(~"--@{theme}-secondary-color-b", var(--theme-base-secondary-color-b));
-}
-
-.component-colors {
-    --theme-body-font-color: var(--black-800);
-
-    // Links
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-350);
-    --theme-link-color-visited: var(--theme-secondary-500);
-
-    // Button Default (Secondary)
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-500);
-    --theme-button-hover-background-color: var(--theme-secondary-050);
-    --theme-button-active-background-color: var(--theme-secondary-100);
-    --theme-button-selected-color: var(--theme-secondary-900);
-    --theme-button-selected-background-color: var(--theme-secondary-150);
-
-    //  Button Primary
-    --theme-button-primary-color: var(--white);
-    --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: var(--white);
-    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
-    --theme-button-primary-active-background-color: var(--theme-secondary-700);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
-    --theme-button-primary-number-color: var(--theme-secondary-900);
-
-    // Button Filled
-    --theme-button-filled-color: var(--theme-secondary-700);
-    --theme-button-filled-background-color: var(--theme-secondary-050);
-    --theme-button-filled-border-color: var(--theme-secondary-350);
-    --theme-button-filled-hover-color: var(--theme-secondary-800);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
-    --theme-button-filled-active-background-color: var(--theme-secondary-150);
-    --theme-button-filled-active-border-color: var(--theme-secondary-350);
-    --theme-button-filled-selected-color: var(--theme-secondary-900);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
-
-    // Button Outline
-    --theme-button-outlined-border-color: var(--theme-secondary-300);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
-
-    // Tags
-    --theme-tag-color: var(--theme-secondary-800);
-    --theme-tag-background-color: var(--theme-secondary-075);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-900);
-    --theme-tag-hover-background-color: var(--theme-secondary-100);
-    --theme-tag-hover-border-color: transparent;
-
-    // Topbar
-    --theme-topbar-height: @su48;
-    --theme-topbar-background-color: var(--black-025);
-
-    // Topbar Search input
-    --theme-topbar-search-color: var(--black-700);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-200);
-    --theme-topbar-search-border: var(--black-200);
-    --theme-topbar-search-border-focus: var(--blue-300);
-    --theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
-
-    // Topbar Search switcher
-    --theme-topbar-select-color: var(--black-700);
-    --theme-topbar-select-background: var(--black-075);
-
-    // Topbar items
-    --theme-topbar-item-color: var(--black-600);
-    --theme-topbar-item-color-hover: var(--black-800);
-    --theme-topbar-item-background-hover: var(--black-075);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary-color);
-
-    // Topbar themed border accent
-    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
-}
-
-//  --  Light mode
-.light-colors() {
-    --white: @white;
-    --black: @black;
-    --orange: @orange;
-    --yellow: @yellow;
-    --green: @green;
-    --blue: @blue;
-    --powder: @powder;
-    --red: @red;
-
-    // Black
-    --black-025: @black-025;
-    --black-050: @black-050;
-    --black-075: @black-075;
-    --black-100: @black-100;
-    --black-150: @black-150;
-    --black-200: @black-200;
-    --black-300: @black-300;
-    --black-350: @black-350;
-    --black-400: @black-400;
-    --black-500: @black-500;
-    --black-600: @black-600;
-    --black-700: @black-700;
-    --black-750: @black-750;
-    --black-800: @black-800;
-    --black-900: @black-900;
-
-    // Orange
-    --orange-050: @orange-050;
-    --orange-100: @orange-100;
-    --orange-200: @orange-200;
-    --orange-300: @orange-300;
-    --orange-400: @orange-400;
-    --orange-500: @orange-500;
-    --orange-600: @orange-600;
-    --orange-700: @orange-700;
-    --orange-800: @orange-800;
-    --orange-900: @orange-900;
-
-    // Blue
-    --blue-050: @blue-050;
-    --blue-100: @blue-100;
-    --blue-200: @blue-200;
-    --blue-300: @blue-300;
-    --blue-400: @blue-400;
-    --blue-500: @blue-500;
-    --blue-600: @blue-600;
-    --blue-700: @blue-700;
-    --blue-800: @blue-800;
-    --blue-900: @blue-900;
-
-    // Powder
-    --powder-050: @powder-050;
-    --powder-100: @powder-100;
-    --powder-200: @powder-200;
-    --powder-300: @powder-300;
-    --powder-400: @powder-400;
-    --powder-500: @powder-500;
-    --powder-600: @powder-600;
-    --powder-700: @powder-700;
-    --powder-800: @powder-800;
-    --powder-900: @powder-900;
-
-    // Green
-    --green-025: @green-025;
-    --green-050: @green-050;
-    --green-100: @green-100;
-    --green-200: @green-200;
-    --green-300: @green-300;
-    --green-400: @green-400;
-    --green-500: @green-500;
-    --green-600: @green-600;
-    --green-700: @green-700;
-    --green-800: @green-800;
-    --green-900: @green-900;
-
-    // Yellow
-    --yellow-050: @yellow-050;
-    --yellow-100: @yellow-100;
-    --yellow-200: @yellow-200;
-    --yellow-300: @yellow-300;
-    --yellow-400: @yellow-400;
-    --yellow-500: @yellow-500;
-    --yellow-600: @yellow-600;
-    --yellow-700: @yellow-700;
-    --yellow-800: @yellow-800;
-    --yellow-900: @yellow-900;
-
-    // Red
-    --red-050: @red-050;
-    --red-100: @red-100;
-    --red-200: @red-200;
-    --red-300: @red-300;
-    --red-400: @red-400;
-    --red-500: @red-500;
-    --red-600: @red-600;
-    --red-700: @red-700;
-    --red-800: @red-800;
-    --red-900: @red-900;
-
-    // Gold
-    --gold: @gold;
-    --gold-lighter: @gold-lighter;
-    --gold-darker: @gold-darker;
-
-    // Silver
-    --silver: @silver;
-    --silver-lighter: @silver-lighter;
-    --silver-darker: @silver-darker;
-
-    // Bronze
-    --bronze: @bronze;
-    --bronze-lighter: @bronze-lighter;
-    --bronze-darker: @bronze-darker;
-
-    // Border colors
-    --bc-lightest: var(--black-025);
-    --bc-lighter: var(--black-050);
-    --bc-light: var(--black-075);
-    --bc-medium: var(--black-100);
-    --bc-dark: var(--black-150);
-    --bc-darker: var(--black-200);
-
-    // Font colors
-    --fc-dark: @black-900;
-    --fc-medium: @black-700;
-    --fc-light: @black-500;
-
-    // Focus rings
-    --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
-    --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
-    --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
-    --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
-
-    // Shadows
-    --bs-sm: @bs-sm;
-    --bs-md: @bs-md;
-    --bs-lg: @bs-lg;
-
-    // Scrollbars
-    --scrollbar: hsla(0, 0, 0, 0.2);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
-    --highlight-color: var(--black-750); // AAA 11.78
-    --highlight-comment: hsl(@black-h, 8%, 43.5%); // ~black-500 AA 4.80
-    --highlight-punctuation: var(--black-600); // AA 6.48
-    --highlight-namespace: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
-    --highlight-attribute: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.25
-    --highlight-literal: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
-    --highlight-symbol: hsl(306, 43%, 35%); // Custom purple AAA 7.30
-    --highlight-keyword: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.07
-    --highlight-variable: hsl(80, 80.5%, 26.5%); // Custom green AAA 7.25
-    --highlight-addition: var(--green-700); // AA 5.59
-    --highlight-deletion: var(--red-600); // AA 5.31
-}
-
-.light-themed-colors() {
-    // Reassemble as a single hsl value
-    --theme-primary-color: .assemble-color(theme-primary-color)[];
-
-    // Steps
-    --theme-primary-900: .native-darken(theme-primary-color, 26)[];
-    --theme-primary-800: .native-darken(theme-primary-color, 21)[];
-    --theme-primary-700: .native-darken(theme-primary-color, 16)[];
-    --theme-primary-600: .native-darken(theme-primary-color, 10)[];
-    --theme-primary-500: .native-darken(theme-primary-color, 5)[];
-    --theme-primary-400: var(--theme-primary-color);
-    --theme-primary-350: .native-tint(theme-primary-color, 20)[];
-    --theme-primary-300: .native-tint(theme-primary-color, 35)[];
-    --theme-primary-200: .native-tint(theme-primary-color, 48)[];
-    --theme-primary-150: .native-tint(theme-primary-color, 65)[];
-    --theme-primary-100: .native-tint(theme-primary-color, 78)[];
-    --theme-primary-075: .native-tint(theme-primary-color, 85)[];
-    --theme-primary-050: .native-tint(theme-primary-color, 92)[];
-    --theme-primary-025: .native-tint(theme-primary-color, 96)[];
-
-    // Reassemble as a single hsl value
-    --theme-secondary-color: .assemble-color(theme-secondary-color)[];
-
-    // Steps
-    --theme-secondary-900: .native-darken(theme-secondary-color, 26)[];
-    --theme-secondary-800: .native-darken(theme-secondary-color, 21)[];
-    --theme-secondary-700: .native-darken(theme-secondary-color, 16)[];
-    --theme-secondary-600: .native-darken(theme-secondary-color, 10)[];
-    --theme-secondary-500: .native-darken(theme-secondary-color, 5)[];
-    --theme-secondary-400: var(--theme-secondary-color);
-    --theme-secondary-350: .native-tint(theme-secondary-color, 20)[];
-    --theme-secondary-300: .native-tint(theme-secondary-color, 35)[];
-    --theme-secondary-200: .native-tint(theme-secondary-color, 48)[];
-    --theme-secondary-150: .native-tint(theme-secondary-color, 65)[];
-    --theme-secondary-100: .native-tint(theme-secondary-color, 78)[];
-    --theme-secondary-075: .native-tint(theme-secondary-color, 85)[];
-    --theme-secondary-050: .native-tint(theme-secondary-color, 92)[];
-    --theme-secondary-025: .native-tint(theme-secondary-color, 96)[];
-
-    // Fades
-    --focus-ring: .native-fade(theme-secondary-color, 15)[];
-
-    // TODO
-    --theme-body-font-color: var(--black-800);
-}
-
-//  --  Dark mode
-.dark-colors() {
-    --white: hsl(@black-h, 0%, 17.5%);
-    --black: @white;
-
-    // Black
-    --black-025: hsl(@black-h, 0%, 22.5%);
-    --black-050: hsl(@black-h, 0%, 24%);
-    --black-075: hsl(@black-h, 4%, 26%);
-    --black-100: hsl(@black-h, 4.5%, 30.5%);
-    --black-150: hsl(@black-h, 5%, 35%);
-    --black-200: hsl(@black-h, 5.5%, 43.5%);
-    --black-300: hsl(@black-h, 6.5%, 52%);
-    --black-350: hsl(@black-h, 7%, 61%);
-    --black-400: hsl(@black-h, 8%, 65%);
-    --black-500: hsl(@black-h, 8%, 70%);
-    --black-600: hsl(@black-h, 7%, 78.5%);
-    --black-700: hsl(@black-h, 8%, 82.5%);
-    --black-750: hsl(@black-h, 9%, 86.5%);
-    --black-800: hsl(@black-h, 9%, 91.5%);
-    --black-900: hsl(@black-h, 4%, 95%);
-
-    // Orange
-    --orange-050: hsl(@orange-h, 16.5%, 23.9%);
-    --orange-100: hsl(@orange-h, 30%, 28.4%);
-    --orange-200: hsl(@orange-h, 50%, 36.9%);
-    --orange-300: hsl(@orange-h, 70%, 47.3%);
-    --orange-400: hsl(@orange-h, 90.5%, 54.9%);
-    --orange-500: hsl(@orange-h, 100%, 59%);
-    --orange-600: hsl(@orange-h, 100%, 68.4%);
-    --orange-700: hsl(@orange-h, 89.5%, 74.1%);
-    --orange-800: hsl(@orange-h, 92%, 85.7%);
-    --orange-900: hsl(@orange-h, 95%, 91.8%);
-
-    // Blue
-    --blue-050: hsl(@blue-h, 40%, 23%);
-    --blue-100: hsl(@blue-h, 44%, 26%);
-    --blue-200: hsl(@blue-h, 46%, 30%);
-    --blue-300: hsl(@blue-h, 53%, 35%);
-    --blue-400: hsl(@blue-h + 3, 56%, 43%);
-    --blue-500: hsl(@blue-h, 64%, 51%);
-    --blue-600: hsl(@blue-h, 100%, 60%);
-    --blue-700: hsl(@blue-h, 90%, 74%);
-    --blue-800: hsl(@blue-h, 95%, 86%);
-    --blue-900: hsl(@blue-h, 91%, 91.5%);
-
-    // Powder
-    --powder-050: hsl(@powder-h, 5%, 27%);
-    --powder-100: hsl(@powder-h, 14%, 28%);
-    --powder-200: hsl(@powder-h, 17.5%, 32%);
-    --powder-300: hsl(@powder-h, 19.5%, 37%);
-    --powder-400: hsl(@powder-h, 22.5%, 44%);
-    --powder-500: hsl(@powder-h, 29%, 54%);
-    --powder-600: hsl(@powder-h, 50%, 65.5%);
-    --powder-700: hsl(@powder-h, 46.5%, 73.5%);
-    --powder-800: hsl(@powder-h, 49.5%, 87%);
-    --powder-900: hsl(@powder-h, 100%, 95%);
-
-    // Green
-    --green-025: hsl(@green-h, 18%, 22%);
-    --green-050: hsl(@green-h, 18%, 25%);
-    --green-100: hsl(@green-h, 22.5%, 31%);
-    --green-200: hsl(@green-h, 23.5%, 37%);
-    --green-300: hsl(@green-h, 25%, 40.5%);
-    --green-400: hsl(@green-h, 27.5%, 48.5%);
-    --green-500: hsl(@green-h, 35%, 54.5%);
-    --green-600: hsl(@green-h, 40%, 61.5%);
-    --green-700: hsl(@green-h, 39.5%, 69.5%);
-    --green-800: hsl(@green-h, 39.5%, 78.5%);
-    --green-900: hsl(@green-h, 38%, 86.5%);
-
-    // Yellow
-    --yellow-050: hsl(@yellow-h, 13%, 24.5%);
-    --yellow-100: hsl(@yellow-h, 19%, 27%);
-    --yellow-200: hsl(@yellow-h, 30.5%, 31%);
-    --yellow-300: hsl(@yellow-h, 37%, 36%);
-    --yellow-400: hsl(@yellow-h, 45.5%, 42.5%);
-    --yellow-500: hsl(@yellow-h, 55.5%, 48%);
-    --yellow-600: hsl(@yellow-h, 67.5%, 55.5%);
-    --yellow-700: hsl(@yellow-h, 84.5%, 64%);
-    --yellow-800: hsl(@yellow-h, 90%, 72.5%);
-    --yellow-900: hsl(@yellow-h, 93%, 83.5%);
-
-    // Red
-    --red-050: hsl(@red-h + 3, 30%, 26.5%);
-    --red-100: hsl(@red-h + 3, 35%, 33%);
-    --red-200: hsl(@red-h + 3, 37%, 38.5%);
-    --red-300: hsl(@red-h + 3, 39%, 43.5%);
-    --red-400: hsl(@red-h + 3, 42%, 49%);
-    --red-500: hsl(@red-h + 3, 50%, 54%);
-    --red-600: hsl(@red-h + 3, 56.5%, 59.5%);
-    --red-700: hsl(@red-h + 3, 62.5%, 65.5%);
-    --red-800: hsl(@red-h + 3, 64%, 74%);
-    --red-900: hsl(@red-h + 3, 65.5%, 85.5%);
-
-    // Gold
-    --gold: @gold;
-    --gold-lighter: hsl(@gold-h, 22%, 30%);
-    --gold-darker: @gold-darker;
-
-    // Silver
-    --silver: @silver;
-    --silver-lighter: hsl(@silver-h, 0%, 26%);
-    --silver-darker: @silver-darker;
-
-    // Bronze
-    --bronze: @bronze;
-    --bronze-lighter: hsl(@bronze-h, 13%, 27%);
-    --bronze-darker: @bronze-darker;
-
-    // Border colors
-    --bc-lightest: var(--black-025);
-    --bc-lighter: var(--black-050);
-    --bc-light: var(--black-075);
-    --bc-medium: var(--black-100);
-    --bc-dark: var(--black-150);
-    --bc-darker: var(--black-200);
-
-    // Font colors
-    --fc-dark: var(--black-900);
-    --fc-medium: var(--black-700);
-    --fc-light: var(--black-500);
-
-    // Focus rings
-    --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
-    --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
-    --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
-    --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
-
-    // Shadows
-    --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
-    --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
-    --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
-
-    // Scrollbars
-    --scrollbar: hsla(0, 0%, 100%, 0.2);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 2%, 11%);
-    --highlight-color: var(--black); // AAA 17.19
-    --highlight-comment: hsl(0, 0%, 60%); // AA 6.03
-    --highlight-punctuation: hsl(0, 0%, 80%); // AAA 10.70
-    --highlight-namespace: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
-    --highlight-attribute: hsl(@powder-h + 2, 41.5%, 67%); // Custom powder blue AAA 7.63
-    --highlight-literal: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
-    --highlight-symbol: hsl(306, 43%, 69%); // Custom purple AAA 7.23
-    --highlight-keyword: hsl(@powder-h + 3, 41.5%, 67%); // Custom powder blue AAA 7.63
-    --highlight-variable: hsl(65.5, 39%, 57.5%);
-    --highlight-addition: var(--green-600); // AAA 8.21
-    --highlight-deletion: var(--red-700); // AA 5.51
-}
-
-.dark-themed-colors() {
-    // Reassemble as a single hsl value
-    --theme-primary-color: .assemble-color(theme-primary-color)[];
-
-    // Reassemble as a single hsl value
-    --theme-secondary-color: .assemble-color(theme-secondary-color)[];
-
-    // Primary Theming
-    --theme-primary-025: .native-darken-desaturate(theme-primary-color, 17, 82)[];
-    --theme-primary-050: .native-darken-desaturate(theme-primary-color, 15, 47)[];
-    --theme-primary-075: .native-darken-desaturate(theme-primary-color, 13, 39)[];
-    --theme-primary-100: .native-darken-desaturate(theme-primary-color, 11, 32)[];
-    --theme-primary-150: .native-darken-desaturate(theme-primary-color, 9, 23)[];
-    --theme-primary-200: .native-darken-desaturate(theme-primary-color, 7, 15)[];
-    --theme-primary-300: .native-darken-desaturate(theme-primary-color, 5, 7)[];
-    --theme-primary-350: var(--theme-primary-color);
-    --theme-primary-400: .native-tint(theme-primary-color, 21)[];
-    --theme-primary-500: .native-tint(theme-primary-color, 36)[];
-    --theme-primary-600: .native-tint(theme-primary-color, 51)[];
-    --theme-primary-700: .native-tint(theme-primary-color, 66)[];
-    --theme-primary-800: .native-tint(theme-primary-color, 81)[];
-    --theme-primary-900: .native-tint(theme-primary-color, 96)[];
-
-    // Secondary Theming
-    --theme-secondary-025: .native-darken-desaturate(theme-secondary-color, 17, 82)[];
-    --theme-secondary-050: .native-darken-desaturate(theme-secondary-color, 15, 47)[];
-    --theme-secondary-075: .native-darken-desaturate(theme-secondary-color, 13, 39)[];
-    --theme-secondary-100: .native-darken-desaturate(theme-secondary-color, 11, 32)[];
-    --theme-secondary-150: .native-darken-desaturate(theme-secondary-color, 9, 23)[];
-    --theme-secondary-200: .native-darken-desaturate(theme-secondary-color, 7, 15)[];
-    --theme-secondary-300: .native-darken-desaturate(theme-secondary-color, 5, 7)[];
-    --theme-secondary-350: var(--theme-secondary-color);
-    --theme-secondary-400: .native-tint(theme-secondary-color, 21)[];
-    --theme-secondary-500: .native-tint(theme-secondary-color, 36)[];
-    --theme-secondary-600: .native-tint(theme-secondary-color, 51)[];
-    --theme-secondary-700: .native-tint(theme-secondary-color, 66)[];
-    --theme-secondary-800: .native-tint(theme-secondary-color, 81)[];
-    --theme-secondary-900: .native-tint(theme-secondary-color, 96)[];
-
-    // Fades
-    --focus-ring: .native-fade(theme-secondary-color, 25)[];
-
-    // TODO
-    --theme-body-font-color: var(--black-800);
-}
-
-// rules shared between .theme-dark and .theme-system w/ prefers-color-scheme: dark
-.theme-dark-rules() {
-    .dark-colors();
-
-    &,
-    & .themed {
-        .generate-themed-variables(theme-dark);
-        // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
-        .dark-themed-colors();
-    }
-
-    & .themed {
-        &:extend(.component-colors);
-    }
-}
-
-//  --  High contrast modes
-.light-highcontrast() {
-    --white: hsl(0, 0%, 100%);
-    --black: hsl(0, 0%, 0%);
-
-    // Black
-    --black-025: hsl(@black-h, @black-s, 97.5%);
-    --black-050: hsl(@black-h, @black-s, 95%);
-    --black-075: hsl(@black-h, @black-s, 92.5%);
-    --black-100: hsl(@black-h, @black-s, 90%);
-    --black-150: hsl(@black-h, @black-s, 87.5%);
-    --black-200: hsl(@black-h, @black-s, 85%);
-    --black-300: hsl(@black-h, @black-s, 35%);
-    --black-350: hsl(@black-h, @black-s, 32.5%);
-    --black-400: hsl(@black-h, @black-s, 30%);
-    --black-500: hsl(@black-h, @black-s, 25%);
-    --black-600: hsl(@black-h, @black-s, 20%);
-    --black-700: hsl(@black-h, @black-s, 15%);
-    --black-750: hsl(@black-h, @black-s, 10%);
-    --black-800: hsl(@black-h, @black-s, 5%);
-    --black-900: hsl(@black-h, @black-s, 0%);
-
-    // Orange
-    --orange-050: hsl(@orange-h, 100%, 97.5%);
-    --orange-100: hsl(@orange-h, 100%, 94%);
-    --orange-200: hsl(@orange-h, 100%, 88%);
-    --orange-300: hsl(@orange-h, 100%, 82%);
-    --orange-400: hsl(@orange-h, 100%, 34%);
-    --orange-500: hsl(@orange-h, 100%, 29%);
-    --orange-600: hsl(@orange-h, 100%, 24%);
-    --orange-700: hsl(@orange-h, 100%, 19%);
-    --orange-800: hsl(@orange-h, 100%, 13%);
-    --orange-900: hsl(@orange-h, 100%, 8%);
-
-    // Blue
-    --blue-050: hsl(@blue-h, 100%, 97.5%);
-    --blue-100: hsl(@blue-h, 100%, 95%);
-    --blue-200: hsl(@blue-h, 100%, 90%);
-    --blue-300: hsl(@blue-h, 100%, 85%);
-    --blue-400: hsl(@blue-h, 100%, 25%);
-    --blue-500: hsl(@blue-h, 100%, 20%);
-    --blue-600: hsl(@blue-h, 100%, 15%);
-    --blue-700: hsl(@blue-h, 100%, 10%);
-    --blue-800: hsl(@blue-h, 100%, 7.5%);
-    --blue-900: hsl(@blue-h, 100%, 5%);
-
-    // Powder
-    --powder-050: hsl(@powder-h, 100%, 97.5%);
-    --powder-100: hsl(@powder-h, 85%, 96%);
-    --powder-200: hsl(@powder-h, 75%, 92%);
-    --powder-300: hsl(@powder-h, 70%, 88%);
-    --powder-400: hsl(@powder-h, 55%, 28%);
-    --powder-500: hsl(@powder-h, 60%, 24%);
-    --powder-600: hsl(@powder-h, 70%, 20%);
-    --powder-700: hsl(@powder-h, 75%, 16%);
-    --powder-800: hsl(@powder-h, 75%, 12%);
-    --powder-900: hsl(@powder-h, 75%, 8%);
-
-    // Green
-    --green-025: hsl(@green-h, 100%, 97%);
-    --green-050: hsl(@green-h, 100%, 96%);
-    --green-100: hsl(@green-h, 100%, 94%);
-    --green-200: hsl(@green-h, 100%, 88%);
-    --green-300: hsl(@green-h, 100%, 82%);
-    --green-400: hsl(@green-h, 100%, 18%);
-    --green-500: hsl(@green-h, 100%, 15%);
-    --green-600: hsl(@green-h, 100%, 12%);
-    --green-700: hsl(@green-h, 100%, 9%);
-    --green-800: hsl(@green-h, 100%, 6%);
-    --green-900: hsl(@green-h, 100%, 3%);
-
-    // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 95%);
-    --yellow-100: hsl(@yellow-h, 100%, 92%);
-    --yellow-200: hsl(@yellow-h, 95%, 85%);
-    --yellow-300: hsl(@yellow-h, 95%, 78%);
-    --yellow-400: hsl(@yellow-h, 100%, 28%);
-    --yellow-500: hsl(@yellow-h, 100%, 26%);
-    --yellow-600: hsl(@yellow-h, 100%, 23%);
-    --yellow-700: hsl(@yellow-h, 100%, 19%);
-    --yellow-800: hsl(@yellow-h, 100%, 13%);
-    --yellow-900: hsl(@yellow-h, 100%, 7%);
-
-    // Red
-    --red-050: hsl(@red-h, 100%, 97.5%);
-    --red-100: hsl(@red-h, 100%, 95%);
-    --red-200: hsl(@red-h, 100%, 90%);
-    --red-300: hsl(@red-h, 100%, 85%);
-    --red-400: hsl(@red-h, 100%, 35%);
-    --red-500: hsl(@red-h, 100%, 29%);
-    --red-600: hsl(@red-h, 100%, 23%);
-    --red-700: hsl(@red-h, 100%, 17%);
-    --red-800: hsl(@red-h, 100%, 11%);
-    --red-900: hsl(@red-h, 100%, 7%);
-
-    // Gold
-    --gold: hsl(@gold-h, 100%, 50%);
-    --gold-lighter: hsl(@gold-h, 100%, 91%);
-    --gold-darker: hsl(@gold-h - 3, 100%, 20%);
-
-    // Silver
-    --silver: hsl(@silver-h, 6%, 72%);
-    --silver-lighter: hsl(@silver-h, 6%, 91%);
-    --silver-darker: hsl(@silver-h, 6%, 30%);
-
-    // Bronze
-    --bronze: hsl(@bronze-h, 38%, 65%);
-    --bronze-lighter: hsl(@bronze-h, 40%, 92%);
-    --bronze-darker: hsl(@bronze-h, 31%, 25%);
-
-    // Border colors
-    --bc-lightest: var(--black-400);
-    --bc-lighter: var(--black-400);
-    --bc-light: var(--black-400);
-    --bc-medium: var(--black-400);
-    --bc-dark: var(--black-700);
-    --bc-darker: var(--black-900);
-
-    // Font colors
-    --fc-dark: var(--black-900);
-    --fc-medium: var(--black-700);
-    --fc-light: var(--black-500);
-
-    // Focus rings
-    --focus-ring: fade(@blue-600, 90%);
-    --focus-ring-success: fade(@green-600, 90%);
-    --focus-ring-warning: fade(@yellow-600, 90%);
-    --focus-ring-error: fade(@red-600, 90%);
-    --focus-ring-muted: fade(@black-400, 95%);
-
-    // Shadows
-    --bs-sm: none;
-    --bs-md: none;
-    --bs-lg: none;
-
-    // Scrollbars
-    --scrollbar: var(--black);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
-    --highlight-color: var(--black-750);
-    --highlight-comment: hsl(213, 7%, 33%); // Custom black
-    --highlight-punctuation: var(--black-600);
-    --highlight-namespace: hsl(16, 94%, 31%); // Custom orange
-    --highlight-attribute: hsl(215, 100%, 35%); // Custom blue
-    --highlight-literal: hsl(16, 94%, 31%); // Custom orange
-    --highlight-symbol: hsl(309, 45%, 31%); // Custom purple
-    --highlight-keyword: hsl(215, 100%, 35%); // Custom blue
-    --highlight-variable: hsl(88, 100%, 19%); // Custom green
-    --highlight-addition: var(--green-500);
-    --highlight-deletion: var(--red-500);
-
-    // High contrast theme override
-    &:extend(.highcontrast-themed-colors);
-}
-
-.dark-highcontrast() {
-    --white: hsl(0, 0%, 0%);
-    --black: hsl(0, 0%, 100%);
-
-    // Black
-    --black-025: hsl(@black-h, @black-s, 2.5%);
-    --black-050: hsl(@black-h, @black-s, 5%);
-    --black-075: hsl(@black-h, @black-s, 7.5%);
-    --black-100: hsl(@black-h, @black-s, 10%);
-    --black-150: hsl(@black-h, @black-s, 12.5%);
-    --black-200: hsl(@black-h, @black-s, 15%);
-    --black-300: hsl(@black-h, @black-s, 65%);
-    --black-350: hsl(@black-h, @black-s, 67.5%);
-    --black-400: hsl(@black-h, @black-s, 70%);
-    --black-500: hsl(@black-h, @black-s, 75%);
-    --black-600: hsl(@black-h, @black-s, 80%);
-    --black-700: hsl(@black-h, @black-s, 85%);
-    --black-750: hsl(@black-h, @black-s, 90%);
-    --black-800: hsl(@black-h, @black-s, 95%);
-    --black-900: hsl(@black-h, @black-s, 100%);
-
-    // Orange
-    --orange-050: hsl(@orange-h, 100%, 4%);
-    --orange-100: hsl(@orange-h, 100%, 8%);
-    --orange-200: hsl(@orange-h, 100%, 16%);
-    --orange-300: hsl(@orange-h, 100%, 24%);
-    --orange-400: hsl(@orange-h, 100%, 64%);
-    --orange-500: hsl(@orange-h, 100%, 71%);
-    --orange-600: hsl(@orange-h, 100%, 77%);
-    --orange-700: hsl(@orange-h, 100%, 82%);
-    --orange-800: hsl(@orange-h, 100%, 87%);
-    --orange-900: hsl(@orange-h, 100%, 91%);
-
-    // Blue
-    --blue-050: hsl(@blue-h, 100%, 4%);
-    --blue-100: hsl(@blue-h, 100%, 11%);
-    --blue-200: hsl(@blue-h, 100%, 18%);
-    --blue-300: hsl(@blue-h, 100%, 25%);
-    --blue-400: hsl(@blue-h, 100%, 75%);
-    --blue-500: hsl(@blue-h, 100%, 80%);
-    --blue-600: hsl(@blue-h, 100%, 85%);
-    --blue-700: hsl(@blue-h, 100%, 90%);
-    --blue-800: hsl(@blue-h, 100%, 92.5%);
-    --blue-900: hsl(@blue-h, 100%, 95%);
-
-    // Powder
-    --powder-050: hsl(@powder-h, 100%, 6%);
-    --powder-100: hsl(@powder-h, 90%, 8%);
-    --powder-200: hsl(@powder-h, 80%, 14%);
-    --powder-300: hsl(@powder-h, 60%, 20%);
-    --powder-400: hsl(@powder-h, 55%, 72%);
-    --powder-500: hsl(@powder-h, 60%, 76%);
-    --powder-600: hsl(@powder-h, 70%, 80%);
-    --powder-700: hsl(@powder-h, 75%, 84%);
-    --powder-800: hsl(@powder-h, 75%, 88%);
-    --powder-900: hsl(@powder-h, 75%, 92%);
-
-    // Green
-    --green-025: hsl(@green-h, 100%, 3%);
-    --green-050: hsl(@green-h, 100%, 4%);
-    --green-100: hsl(@green-h, 100%, 6%);
-    --green-200: hsl(@green-h, 100%, 12%);
-    --green-300: hsl(@green-h, 100%, 18%);
-    --green-400: hsl(@green-h, 100%, 65%);
-    --green-500: hsl(@green-h, 100%, 71%);
-    --green-600: hsl(@green-h, 100%, 77%);
-    --green-700: hsl(@green-h, 100%, 83%);
-    --green-800: hsl(@green-h, 100%, 89%);
-    --green-900: hsl(@green-h, 100%, 94%);
-
-    // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 4%);
-    --yellow-100: hsl(@yellow-h, 100%, 8%);
-    --yellow-200: hsl(@yellow-h, 95%, 16%);
-    --yellow-300: hsl(@yellow-h, 95%, 24%);
-    --yellow-400: hsl(@yellow-h, 100%, 55%);
-    --yellow-500: hsl(@yellow-h, 100%, 63%);
-    --yellow-600: hsl(@yellow-h, 100%, 71%);
-    --yellow-700: hsl(@yellow-h, 100%, 79%);
-    --yellow-800: hsl(@yellow-h, 100%, 87%);
-    --yellow-900: hsl(@yellow-h, 100%, 95%);
-
-    // Red
-    --red-050: hsl(@red-h, 100%, 4%);
-    --red-100: hsl(@red-h, 100%, 8%);
-    --red-200: hsl(@red-h, 100%, 16%);
-    --red-300: hsl(@red-h, 100%, 24%);
-    --red-400: hsl(@red-h, 100%, 70%);
-    --red-500: hsl(@red-h, 100%, 75%);
-    --red-600: hsl(@red-h, 100%, 80%);
-    --red-700: hsl(@red-h, 100%, 85%);
-    --red-800: hsl(@red-h, 100%, 90%);
-    --red-900: hsl(@red-h, 100%, 95%);
-
-    // Gold
-    --gold: hsl(@gold-h, 100%, 50%);
-    --gold-lighter: hsl(@gold-h - 3, 100%, 9%);
-    --gold-darker: hsl(@gold-h - 3, 100%, 80%);
-
-    // Silver
-    --silver: hsl(@silver-h, 6%, 72%);
-    --silver-lighter: hsl(@silver-h, 5%, 9%);
-    --silver-darker: hsl(@silver-h, 5%, 70%);
-
-    // Bronze
-    --bronze: hsl(@bronze-h, 38%, 65%);
-    --bronze-lighter: hsl(@bronze-h, 40%, 8%);
-    --bronze-darker: hsl(@bronze-h, 46.7%, 75%);
-
-    // Border colors
-    --bc-lightest: var(--black-400);
-    --bc-lighter: var(--black-400);
-    --bc-light: var(--black-400);
-    --bc-medium: var(--black-400);
-    --bc-dark: var(--black-700);
-    --bc-darker: var(--black-900);
-
-    // Focus rings
-    --focus-ring: fade(@blue-600, 90%);
-    --focus-ring-success: fade(@green-600, 90%);
-    --focus-ring-warning: fade(@yellow-600, 90%);
-    --focus-ring-error: fade(@red-600, 90%);
-    --focus-ring-muted: fade(@black-400, 95%);
-
-    // Font colors
-    --fc-dark: var(--black-900);
-    --fc-medium: var(--black-700);
-    --fc-light: var(--black-500);
-
-    // Shadows
-    --bs-sm: none;
-    --bs-md: none;
-    --bs-lg: none;
-
-    // Scrollbars
-    --scrollbar: var(--black);
-
-    // Syntax highlighting
-    --highlight-bg: hsl(0, 0%, 10%);
-    --highlight-color: hsl(0, 0%, 100%);
-    --highlight-comment: hsl(0, 0%, 99%); // Custom gray
-    --highlight-punctuation: hsl(0, 0%, 99%); // Custom gray
-    --highlight-namespace: hsl(36, 96%, 71%); // Custom orange
-    --highlight-attribute: hsl(200, 57%, 85%); // Custom blue
-    --highlight-literal: hsl(36, 96%, 71%); // Custom orange
-    --highlight-symbol: hsl(304, 39%, 85%); // Custom purple
-    --highlight-keyword: hsl(200, 57%, 85%); // Custom blue
-    --highlight-variable: hsl(62, 71%, 81%); // Custom green
-    --highlight-addition: var(--green-600);
-    --highlight-deletion: var(--red-700);
-
-    // High contrast theme override
-    &:extend(.highcontrast-themed-colors);
-}
-
-.highcontrast-themed-colors {
-    // Primary Theming
-    --theme-primary-color: var(--orange-400);
-    --theme-primary-025: var(--orange-050);
-    --theme-primary-050: var(--orange-050);
-    --theme-primary-075: var(--orange-050);
-    --theme-primary-100: var(--orange-100);
-    --theme-primary-150: var(--orange-100);
-    --theme-primary-200: var(--orange-200);
-    --theme-primary-300: var(--orange-300);
-    --theme-primary-350: var(--orange-300);
-    --theme-primary-400: var(--orange-400);
-    --theme-primary-500: var(--orange-500);
-    --theme-primary-600: var(--orange-600);
-    --theme-primary-700: var(--orange-700);
-    --theme-primary-800: var(--orange-800);
-    --theme-primary-900: var(--orange-900);
-
-    // Secondary Theming
-    --theme-secondary-color: var(--blue-400);
-    --theme-secondary-025: var(--blue-050);
-    --theme-secondary-050: var(--blue-050);
-    --theme-secondary-075: var(--blue-050);
-    --theme-secondary-100: var(--blue-100);
-    --theme-secondary-150: var(--blue-100);
-    --theme-secondary-200: var(--blue-200);
-    --theme-secondary-300: var(--blue-300);
-    --theme-secondary-350: var(--blue-300);
-    --theme-secondary-400: var(--blue-400);
-    --theme-secondary-500: var(--blue-500);
-    --theme-secondary-600: var(--blue-600);
-    --theme-secondary-700: var(--blue-700);
-    --theme-secondary-800: var(--blue-800);
-    --theme-secondary-900: var(--blue-900);
-}
-
-:root {
-    // specify the default colors in less, then deconstruct them
-    // this keeps the hsl/rgb variables below in sync, but consumers will need to set each variable separately
-    @defaultPrimaryColor: @orange;
-    @defaultSecondaryColor: @blue;
-    .generate-calculated-themed-variables(@defaultPrimaryColor, primary);
-    .generate-calculated-themed-variables(@defaultSecondaryColor, secondary);
-}
-
-// place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
-body {
-    &:extend(.component-colors);
-}
-
-// Light mode
-body:not(.theme-dark),
-body.theme-dark .theme-light__forced,
-body.theme-system .theme-light__forced {
-    .light-colors();
-
-    &,
-    & .themed {
-        .generate-themed-variables(theme-light);
-        // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
-        .light-themed-colors();
-    }
-
-    & .themed {
-        &:extend(.component-colors);
-    }
-}
-
-// Dark mode
-body.theme-dark,
-body:not(.theme-dark) .theme-dark__forced {
-    .theme-dark-rules();
-}
-body.theme-system {
-    @media (prefers-color-scheme: dark) {
-        .theme-dark-rules();
-    }
-}
-
-// High contrast mode (Light)
-body.theme-highcontrast:not(.theme-dark),
-body.theme-dark.theme-highcontrast .theme-light__forced,
-body.theme-system.theme-highcontrast .theme-light__forced {
-    .light-highcontrast();
-}
-
-// High contrast mode (Dark)
-body.theme-dark.theme-highcontrast,
-body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
-    .dark-highcontrast();
-}
-body.theme-system.theme-highcontrast {
-    @media (prefers-color-scheme: dark) {
-        .dark-highcontrast();
-    }
-}
+@import (reference) "./_stacks-mixins.less";
+
+//
+//  STACK OVERFLOW
+//  CONSTANTS -- COLORS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  ============================================================================
+//  $   Legacy Less color variables
+//  ----------------------------------------------------------------------------
+//  --  Base Hue Values
+@white-h: 0;
+@black-h: 210;
+@orange-h: 27;
+@yellow-h: 47;
+@green-h: 140;
+@blue-h: 206;
+@powder-h: 205;
+@red-h: 358;
+@fog-h: 180;
+@gold-h: 48;
+@silver-h: 210;
+@bronze-h: 28;
+
+//  --  Base Saturation Values
+@black-s: 8%;
+
+//  --  Primary Colors
+@white: hsl(@white-h, 0%, 100%);
+@black: hsl(@black-h, @black-s, 5%);
+@orange: hsl(@orange-h, 90%, 55%);
+
+//  --  Accent Colors
+@yellow: hsl(@yellow-h, 83%, 91%);
+@green: hsl(@green-h, 40%, 55%);
+@blue: hsl(@blue-h, 100%, 40%);
+@powder: hsl(@powder-h, 46%, 92%);
+@red: hsl(@red-h, 62%, 52%);
+@fog: hsl(@fog-h, 7%, 97%);
+
+// Black
+@black-025: hsl(@black-h, @black-s, 97.5%);
+@black-050: hsl(@black-h, @black-s, 95%);
+@black-075: hsl(@black-h, @black-s, 90%);
+@black-100: hsl(@black-h, @black-s, 85%);
+@black-150: hsl(@black-h, @black-s, 80%);
+@black-200: hsl(@black-h, @black-s, 75%);
+@black-300: hsl(@black-h, @black-s, 65%);
+@black-350: hsl(@black-h, @black-s, 60%);
+@black-400: hsl(@black-h, @black-s, 55%);
+@black-500: hsl(@black-h, @black-s, 45%);
+@black-600: hsl(@black-h, @black-s, 35%);
+@black-700: hsl(@black-h, @black-s, 25%);
+@black-750: hsl(@black-h, @black-s, 20%);
+@black-800: hsl(@black-h, @black-s, 15%);
+@black-900: @black;
+
+// Orange
+@orange-050: hsl(@orange-h, 100%, 97%);
+@orange-100: hsl(@orange-h, 95%, 90%);
+@orange-200: hsl(@orange-h, 90%, 83%);
+@orange-300: hsl(@orange-h, 90%, 70%);
+@orange-400: @orange;
+@orange-500: hsl(@orange-h, 90%, 50%);
+@orange-600: hsl(@orange-h, 90%, 45%);
+@orange-700: hsl(@orange-h, 90%, 39%);
+@orange-800: hsl(@orange-h, 87%, 35%);
+@orange-900: hsl(@orange-h, 80%, 30%);
+
+// Blue
+@blue-050: hsl(@blue-h, 100%, 97%);
+@blue-100: hsl(@blue-h, 96%, 90%);
+@blue-200: hsl(@blue-h, 93%, 83.5%);
+@blue-300: hsl(@blue-h, 90%, 69.5%);
+@blue-400: hsl(@blue-h, 85%, 57.5%);
+@blue-500: hsl(@blue-h, 100%, 52%);
+@blue-600: @blue;
+@blue-700: hsl(@blue-h + 3, 100%, 37.5%);
+@blue-800: hsl(@blue-h + 3, 100%, 32%);
+@blue-900: hsl(@blue-h + 3, 100%, 26%);
+
+// Powder
+@powder-050: hsl(@powder-h, 47%, 97%);
+@powder-100: @powder;
+@powder-200: hsl(@powder-h, 53%, 88%);
+@powder-300: hsl(@powder-h, 57%, 81%);
+@powder-400: hsl(@powder-h, 56%, 76%);
+@powder-500: hsl(@powder-h, 41%, 63%);
+@powder-600: hsl(@powder-h, 36%, 53%);
+@powder-700: hsl(@powder-h, 47%, 42%);
+@powder-800: hsl(@powder-h, 46%, 32%);
+@powder-900: hsl(@powder-h, 46%, 22%);
+
+// Green
+@green-025: hsl(@green-h, 42%, 95%);
+@green-050: hsl(@green-h, 40%, 90%);
+@green-100: hsl(@green-h, 40%, 85%);
+@green-200: hsl(@green-h, 40%, 75%);
+@green-300: hsl(@green-h, 40%, 65%);
+@green-400: @green;
+@green-500: hsl(@green-h, 40%, 47%);
+@green-600: hsl(@green-h, 40%, 40%);
+@green-700: hsl(@green-h, 41%, 31%);
+@green-800: hsl(@green-h, 40%, 27%);
+@green-900: hsl(@green-h, 40%, 20%);
+
+// Yellow
+@yellow-050: hsl(@yellow-h, 87%, 94%);
+@yellow-100: @yellow;
+@yellow-200: hsl(@yellow-h, 65%, 84%);
+@yellow-300: hsl(@yellow-h, 69%, 69%);
+@yellow-400: hsl(@yellow-h, 79%, 58%);
+@yellow-500: hsl(@yellow-h, 73%, 50%);
+@yellow-600: hsl(@yellow-h, 76%, 46%);
+@yellow-700: hsl(@yellow-h, 79%, 40%);
+@yellow-800: hsl(@yellow-h, 82%, 34%);
+@yellow-900: hsl(@yellow-h, 84%, 28%);
+
+// Red
+@red-050: hsl(@red-h, 75%, 97%);
+@red-100: hsl(@red-h, 76%, 90%);
+@red-200: hsl(@red-h, 74%, 83%);
+@red-300: hsl(@red-h, 70%, 70%);
+@red-400: hsl(@red-h, 68%, 59%);
+@red-500: @red;
+@red-600: hsl(@red-h, 62%, 47%);
+@red-700: hsl(@red-h, 64%, 41%);
+@red-800: hsl(@red-h, 64%, 35%);
+@red-900: hsl(@red-h, 67%, 29%);
+
+//  $  BADGES
+//  ----------------------------------------------------------------------------
+@gold: hsl(@gold-h, 100%, 50%);
+@gold-lighter: hsl(@gold-h, 100%, 91%);
+@gold-darker: hsl(@gold-h - 3, 100%, 47%);
+
+@silver: hsl(@silver-h, 6%, 72%);
+@silver-lighter: hsl(@silver-h, 0%, 91%);
+@silver-darker: hsl(@silver-h, 3%, 61%);
+
+@bronze: hsl(@bronze-h, 38%, 67%);
+@bronze-lighter: hsl(@bronze-h, 40%, 92%);
+@bronze-darker: hsl(@bronze-h, 31%, 52%);
+
+//  $  SHADOWS
+//  ----------------------------------------------------------------------------
+@bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
+@bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
+@bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
+@bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
+
+//  $  SCROLLBARS
+//  ----------------------------------------------------------------------------
+@scrollbar: hsla(0, 0%, 0%, 0.2);
+
+//  ============================================================================
+//  $   CSS Variable Colors
+//  ----------------------------------------------------------------------------
+
+.generate-calculated-themed-variables(@primary, @designation: primary, @theme: base) {
+    // Split into h/s/l/a values
+    --theme-@{theme}-@{designation}-color-h: hue(@primary);
+    --theme-@{theme}-@{designation}-color-s: saturation(@primary);
+    --theme-@{theme}-@{designation}-color-l: lightness(@primary);
+
+    // Split into r/g/b values
+    --theme-@{theme}-@{designation}-color-r: red(@primary);
+    --theme-@{theme}-@{designation}-color-g: green(@primary);
+    --theme-@{theme}-@{designation}-color-b: blue(@primary);
+}
+
+.generate-themed-variables(@theme: theme) {
+    // Primary color
+    // Split into h/s/l/a values
+    --theme-primary-color-h: var(~"--@{theme}-primary-color-h", var(--theme-base-primary-color-h));
+    --theme-primary-color-s: var(~"--@{theme}-primary-color-s", var(--theme-base-primary-color-s));
+    --theme-primary-color-l: var(~"--@{theme}-primary-color-l", var(--theme-base-primary-color-l));
+
+    // Split into r/g/b values
+    --theme-primary-color-r: var(~"--@{theme}-primary-color-r", var(--theme-base-primary-color-r));
+    --theme-primary-color-g: var(~"--@{theme}-primary-color-g", var(--theme-base-primary-color-g));
+    --theme-primary-color-b: var(~"--@{theme}-primary-color-b", var(--theme-base-primary-color-b));
+
+    // Secondary color
+    // Split into h/s/l/a values
+    --theme-secondary-color-h: var(~"--@{theme}-secondary-color-h", var(--theme-base-secondary-color-h));
+    --theme-secondary-color-s: var(~"--@{theme}-secondary-color-s", var(--theme-base-secondary-color-s));
+    --theme-secondary-color-l: var(~"--@{theme}-secondary-color-l", var(--theme-base-secondary-color-l));
+
+    // Split into r/g/b values
+    --theme-secondary-color-r: var(~"--@{theme}-secondary-color-r", var(--theme-base-secondary-color-r));
+    --theme-secondary-color-g: var(~"--@{theme}-secondary-color-g", var(--theme-base-secondary-color-g));
+    --theme-secondary-color-b: var(~"--@{theme}-secondary-color-b", var(--theme-base-secondary-color-b));
+}
+
+.component-colors {
+    --theme-body-font-color: var(--black-800);
+    --theme-background-color: var(--white);
+    // Links
+    --theme-link-color: var(--theme-secondary-400);
+    --theme-link-color-hover: var(--theme-secondary-350);
+    --theme-link-color-visited: var(--theme-secondary-500);
+
+    // Button Default (Secondary)
+    --theme-button-color: var(--theme-secondary-400);
+    --theme-button-background-color: transparent;
+    --theme-button-hover-color: var(--theme-secondary-500);
+    --theme-button-hover-background-color: var(--theme-secondary-050);
+    --theme-button-active-background-color: var(--theme-secondary-100);
+    --theme-button-selected-color: var(--theme-secondary-900);
+    --theme-button-selected-background-color: var(--theme-secondary-150);
+
+    //  Button Primary
+    --theme-button-primary-color: var(--white);
+    --theme-button-primary-background-color: var(--theme-secondary-400);
+    --theme-button-primary-hover-color: var(--white);
+    --theme-button-primary-hover-background-color: var(--theme-secondary-500);
+    --theme-button-primary-active-background-color: var(--theme-secondary-700);
+    --theme-button-primary-selected-color: var(--white);
+    --theme-button-primary-selected-background-color: var(--theme-secondary-700);
+    --theme-button-primary-number-color: var(--theme-secondary-900);
+
+    // Button Filled
+    --theme-button-filled-color: var(--theme-secondary-700);
+    --theme-button-filled-background-color: var(--theme-secondary-050);
+    --theme-button-filled-border-color: var(--theme-secondary-350);
+    --theme-button-filled-hover-color: var(--theme-secondary-800);
+    --theme-button-filled-hover-background-color: var(--theme-secondary-100);
+    --theme-button-filled-active-background-color: var(--theme-secondary-150);
+    --theme-button-filled-active-border-color: var(--theme-secondary-350);
+    --theme-button-filled-selected-color: var(--theme-secondary-900);
+    --theme-button-filled-selected-background-color: var(--theme-secondary-300);
+    --theme-button-filled-selected-border-color: var(--theme-secondary-500);
+
+    // Button Outline
+    --theme-button-outlined-border-color: var(--theme-secondary-300);
+    --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
+
+    // Tags
+    --theme-tag-color: var(--theme-secondary-800);
+    --theme-tag-background-color: var(--theme-secondary-075);
+    --theme-tag-border-color: transparent;
+    --theme-tag-hover-color: var(--theme-secondary-900);
+    --theme-tag-hover-background-color: var(--theme-secondary-100);
+    --theme-tag-hover-border-color: transparent;
+
+    // Topbar
+    --theme-topbar-height: @su48;
+    --theme-topbar-background-color: var(--black-025);
+
+    // Topbar Search input
+    --theme-topbar-search-color: var(--black-700);
+    --theme-topbar-search-background: var(--white);
+    --theme-topbar-search-placeholder: var(--black-200);
+    --theme-topbar-search-border: var(--black-200);
+    --theme-topbar-search-border-focus: var(--blue-300);
+    --theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
+
+    // Topbar Search switcher
+    --theme-topbar-select-color: var(--black-700);
+    --theme-topbar-select-background: var(--black-075);
+
+    // Topbar items
+    --theme-topbar-item-color: var(--black-600);
+    --theme-topbar-item-color-hover: var(--black-800);
+    --theme-topbar-item-background-hover: var(--black-075);
+    --theme-topbar-item-color-current: var(--black);
+    --theme-topbar-item-border-current: var(--theme-primary-color);
+
+    // Topbar themed border accent
+    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
+
+    // Post summary
+    --theme-post-title-color: var(--theme-link-color);
+    --theme-post-title-color-hover: var(--theme-link-color-hover);
+    --theme-post-title-color-visited: var(--theme-link-color-visited);
+    --theme-post-title-font-family: var(--theme-body-font-family);
+    --theme-post-body-font-family: var(--theme-body-font-family);
+}
+
+//  --  Light mode
+.light-colors() {
+    --white: @white;
+    --black: @black;
+    --orange: @orange;
+    --yellow: @yellow;
+    --green: @green;
+    --blue: @blue;
+    --powder: @powder;
+    --red: @red;
+
+    // Black
+    --black-025: @black-025;
+    --black-050: @black-050;
+    --black-075: @black-075;
+    --black-100: @black-100;
+    --black-150: @black-150;
+    --black-200: @black-200;
+    --black-300: @black-300;
+    --black-350: @black-350;
+    --black-400: @black-400;
+    --black-500: @black-500;
+    --black-600: @black-600;
+    --black-700: @black-700;
+    --black-750: @black-750;
+    --black-800: @black-800;
+    --black-900: @black-900;
+
+    // Orange
+    --orange-050: @orange-050;
+    --orange-100: @orange-100;
+    --orange-200: @orange-200;
+    --orange-300: @orange-300;
+    --orange-400: @orange-400;
+    --orange-500: @orange-500;
+    --orange-600: @orange-600;
+    --orange-700: @orange-700;
+    --orange-800: @orange-800;
+    --orange-900: @orange-900;
+
+    // Blue
+    --blue-050: @blue-050;
+    --blue-100: @blue-100;
+    --blue-200: @blue-200;
+    --blue-300: @blue-300;
+    --blue-400: @blue-400;
+    --blue-500: @blue-500;
+    --blue-600: @blue-600;
+    --blue-700: @blue-700;
+    --blue-800: @blue-800;
+    --blue-900: @blue-900;
+
+    // Powder
+    --powder-050: @powder-050;
+    --powder-100: @powder-100;
+    --powder-200: @powder-200;
+    --powder-300: @powder-300;
+    --powder-400: @powder-400;
+    --powder-500: @powder-500;
+    --powder-600: @powder-600;
+    --powder-700: @powder-700;
+    --powder-800: @powder-800;
+    --powder-900: @powder-900;
+
+    // Green
+    --green-025: @green-025;
+    --green-050: @green-050;
+    --green-100: @green-100;
+    --green-200: @green-200;
+    --green-300: @green-300;
+    --green-400: @green-400;
+    --green-500: @green-500;
+    --green-600: @green-600;
+    --green-700: @green-700;
+    --green-800: @green-800;
+    --green-900: @green-900;
+
+    // Yellow
+    --yellow-050: @yellow-050;
+    --yellow-100: @yellow-100;
+    --yellow-200: @yellow-200;
+    --yellow-300: @yellow-300;
+    --yellow-400: @yellow-400;
+    --yellow-500: @yellow-500;
+    --yellow-600: @yellow-600;
+    --yellow-700: @yellow-700;
+    --yellow-800: @yellow-800;
+    --yellow-900: @yellow-900;
+
+    // Red
+    --red-050: @red-050;
+    --red-100: @red-100;
+    --red-200: @red-200;
+    --red-300: @red-300;
+    --red-400: @red-400;
+    --red-500: @red-500;
+    --red-600: @red-600;
+    --red-700: @red-700;
+    --red-800: @red-800;
+    --red-900: @red-900;
+
+    // Gold
+    --gold: @gold;
+    --gold-lighter: @gold-lighter;
+    --gold-darker: @gold-darker;
+
+    // Silver
+    --silver: @silver;
+    --silver-lighter: @silver-lighter;
+    --silver-darker: @silver-darker;
+
+    // Bronze
+    --bronze: @bronze;
+    --bronze-lighter: @bronze-lighter;
+    --bronze-darker: @bronze-darker;
+
+    // Border colors
+    --bc-lightest: var(--black-025);
+    --bc-lighter: var(--black-050);
+    --bc-light: var(--black-075);
+    --bc-medium: var(--black-100);
+    --bc-dark: var(--black-150);
+    --bc-darker: var(--black-200);
+
+    // Font colors
+    --fc-dark: @black-900;
+    --fc-medium: @black-700;
+    --fc-light: @black-500;
+
+    // Focus rings
+    --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
+    --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
+    --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
+    --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
+
+    // Shadows
+    --bs-sm: @bs-sm;
+    --bs-md: @bs-md;
+    --bs-lg: @bs-lg;
+    --bs-xl: @bs-xl;
+
+    // Scrollbars
+    --scrollbar: hsla(0, 0, 0, 0.2);
+
+    // Syntax highlighting
+    --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
+    --highlight-color: var(--black-750); // AAA 11.78
+    --highlight-comment: hsl(@black-h, 8%, 43.5%); // ~black-500 AA 4.80
+    --highlight-punctuation: var(--black-600); // AA 6.48
+    --highlight-namespace: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
+    --highlight-attribute: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.25
+    --highlight-literal: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
+    --highlight-symbol: hsl(306, 43%, 35%); // Custom purple AAA 7.30
+    --highlight-keyword: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.07
+    --highlight-variable: hsl(80, 80.5%, 26.5%); // Custom green AAA 7.25
+    --highlight-addition: var(--green-700); // AA 5.59
+    --highlight-deletion: var(--red-600); // AA 5.31
+}
+
+.light-themed-colors() {
+    // Reassemble as a single hsl value
+    --theme-primary-color: .assemble-color(theme-primary-color)[];
+
+    // Steps
+    --theme-primary-900: .native-darken(theme-primary-color, 26)[];
+    --theme-primary-800: .native-darken(theme-primary-color, 21)[];
+    --theme-primary-700: .native-darken(theme-primary-color, 16)[];
+    --theme-primary-600: .native-darken(theme-primary-color, 10)[];
+    --theme-primary-500: .native-darken(theme-primary-color, 5)[];
+    --theme-primary-400: var(--theme-primary-color);
+    --theme-primary-350: .native-tint(theme-primary-color, 20)[];
+    --theme-primary-300: .native-tint(theme-primary-color, 35)[];
+    --theme-primary-200: .native-tint(theme-primary-color, 48)[];
+    --theme-primary-150: .native-tint(theme-primary-color, 65)[];
+    --theme-primary-100: .native-tint(theme-primary-color, 78)[];
+    --theme-primary-075: .native-tint(theme-primary-color, 85)[];
+    --theme-primary-050: .native-tint(theme-primary-color, 92)[];
+    --theme-primary-025: .native-tint(theme-primary-color, 96)[];
+
+    // Reassemble as a single hsl value
+    --theme-secondary-color: .assemble-color(theme-secondary-color)[];
+
+    // Steps
+    --theme-secondary-900: .native-darken(theme-secondary-color, 26)[];
+    --theme-secondary-800: .native-darken(theme-secondary-color, 21)[];
+    --theme-secondary-700: .native-darken(theme-secondary-color, 16)[];
+    --theme-secondary-600: .native-darken(theme-secondary-color, 10)[];
+    --theme-secondary-500: .native-darken(theme-secondary-color, 5)[];
+    --theme-secondary-400: var(--theme-secondary-color);
+    --theme-secondary-350: .native-tint(theme-secondary-color, 20)[];
+    --theme-secondary-300: .native-tint(theme-secondary-color, 35)[];
+    --theme-secondary-200: .native-tint(theme-secondary-color, 48)[];
+    --theme-secondary-150: .native-tint(theme-secondary-color, 65)[];
+    --theme-secondary-100: .native-tint(theme-secondary-color, 78)[];
+    --theme-secondary-075: .native-tint(theme-secondary-color, 85)[];
+    --theme-secondary-050: .native-tint(theme-secondary-color, 92)[];
+    --theme-secondary-025: .native-tint(theme-secondary-color, 96)[];
+
+    // Fades
+    --focus-ring: .native-fade(theme-secondary-color, 15)[];
+
+    // TODO
+    --theme-body-font-color: var(--black-800);
+}
+
+//  --  Dark mode
+.dark-colors() {
+    --white: hsl(@black-h, 0%, 17.5%);
+    --black: @white;
+
+    // Black
+    --black-025: hsl(@black-h, 0%, 22.5%);
+    --black-050: hsl(@black-h, 0%, 24%);
+    --black-075: hsl(@black-h, 4%, 26%);
+    --black-100: hsl(@black-h, 4.5%, 30.5%);
+    --black-150: hsl(@black-h, 5%, 35%);
+    --black-200: hsl(@black-h, 5.5%, 43.5%);
+    --black-300: hsl(@black-h, 6.5%, 52%);
+    --black-350: hsl(@black-h, 7%, 61%);
+    --black-400: hsl(@black-h, 8%, 65%);
+    --black-500: hsl(@black-h, 8%, 70%);
+    --black-600: hsl(@black-h, 7%, 78.5%);
+    --black-700: hsl(@black-h, 8%, 82.5%);
+    --black-750: hsl(@black-h, 9%, 86.5%);
+    --black-800: hsl(@black-h, 9%, 91.5%);
+    --black-900: hsl(@black-h, 4%, 95%);
+
+    // Orange
+    --orange-050: hsl(@orange-h, 16.5%, 23.9%);
+    --orange-100: hsl(@orange-h, 30%, 28.4%);
+    --orange-200: hsl(@orange-h, 50%, 36.9%);
+    --orange-300: hsl(@orange-h, 70%, 47.3%);
+    --orange-400: hsl(@orange-h, 90.5%, 54.9%);
+    --orange-500: hsl(@orange-h, 100%, 59%);
+    --orange-600: hsl(@orange-h, 100%, 68.4%);
+    --orange-700: hsl(@orange-h, 89.5%, 74.1%);
+    --orange-800: hsl(@orange-h, 92%, 85.7%);
+    --orange-900: hsl(@orange-h, 95%, 91.8%);
+
+    // Blue
+    --blue-050: hsl(@blue-h, 40%, 23%);
+    --blue-100: hsl(@blue-h, 44%, 26%);
+    --blue-200: hsl(@blue-h, 46%, 30%);
+    --blue-300: hsl(@blue-h, 53%, 35%);
+    --blue-400: hsl(@blue-h + 3, 56%, 43%);
+    --blue-500: hsl(@blue-h, 64%, 51%);
+    --blue-600: hsl(@blue-h, 100%, 60%);
+    --blue-700: hsl(@blue-h, 90%, 74%);
+    --blue-800: hsl(@blue-h, 95%, 86%);
+    --blue-900: hsl(@blue-h, 91%, 91.5%);
+
+    // Powder
+    --powder-050: hsl(@powder-h, 5%, 27%);
+    --powder-100: hsl(@powder-h, 14%, 28%);
+    --powder-200: hsl(@powder-h, 17.5%, 32%);
+    --powder-300: hsl(@powder-h, 19.5%, 37%);
+    --powder-400: hsl(@powder-h, 22.5%, 44%);
+    --powder-500: hsl(@powder-h, 29%, 54%);
+    --powder-600: hsl(@powder-h, 50%, 65.5%);
+    --powder-700: hsl(@powder-h, 46.5%, 73.5%);
+    --powder-800: hsl(@powder-h, 49.5%, 87%);
+    --powder-900: hsl(@powder-h, 100%, 95%);
+
+    // Green
+    --green-025: hsl(@green-h, 18%, 22%);
+    --green-050: hsl(@green-h, 18%, 25%);
+    --green-100: hsl(@green-h, 22.5%, 31%);
+    --green-200: hsl(@green-h, 23.5%, 37%);
+    --green-300: hsl(@green-h, 25%, 40.5%);
+    --green-400: hsl(@green-h, 27.5%, 48.5%);
+    --green-500: hsl(@green-h, 35%, 54.5%);
+    --green-600: hsl(@green-h, 40%, 61.5%);
+    --green-700: hsl(@green-h, 39.5%, 69.5%);
+    --green-800: hsl(@green-h, 39.5%, 78.5%);
+    --green-900: hsl(@green-h, 38%, 86.5%);
+
+    // Yellow
+    --yellow-050: hsl(@yellow-h, 13%, 24.5%);
+    --yellow-100: hsl(@yellow-h, 19%, 27%);
+    --yellow-200: hsl(@yellow-h, 30.5%, 31%);
+    --yellow-300: hsl(@yellow-h, 37%, 36%);
+    --yellow-400: hsl(@yellow-h, 45.5%, 42.5%);
+    --yellow-500: hsl(@yellow-h, 55.5%, 48%);
+    --yellow-600: hsl(@yellow-h, 67.5%, 55.5%);
+    --yellow-700: hsl(@yellow-h, 84.5%, 64%);
+    --yellow-800: hsl(@yellow-h, 90%, 72.5%);
+    --yellow-900: hsl(@yellow-h, 93%, 83.5%);
+
+    // Red
+    --red-050: hsl(@red-h + 3, 30%, 26.5%);
+    --red-100: hsl(@red-h + 3, 35%, 33%);
+    --red-200: hsl(@red-h + 3, 37%, 38.5%);
+    --red-300: hsl(@red-h + 3, 39%, 43.5%);
+    --red-400: hsl(@red-h + 3, 42%, 49%);
+    --red-500: hsl(@red-h + 3, 50%, 54%);
+    --red-600: hsl(@red-h + 3, 56.5%, 59.5%);
+    --red-700: hsl(@red-h + 3, 62.5%, 65.5%);
+    --red-800: hsl(@red-h + 3, 64%, 74%);
+    --red-900: hsl(@red-h + 3, 65.5%, 85.5%);
+
+    // Gold
+    --gold: @gold;
+    --gold-lighter: hsl(@gold-h, 22%, 30%);
+    --gold-darker: @gold-darker;
+
+    // Silver
+    --silver: @silver;
+    --silver-lighter: hsl(@silver-h, 0%, 26%);
+    --silver-darker: @silver-darker;
+
+    // Bronze
+    --bronze: @bronze;
+    --bronze-lighter: hsl(@bronze-h, 13%, 27%);
+    --bronze-darker: @bronze-darker;
+
+    // Border colors
+    --bc-lightest: var(--black-025);
+    --bc-lighter: var(--black-050);
+    --bc-light: var(--black-075);
+    --bc-medium: var(--black-100);
+    --bc-dark: var(--black-150);
+    --bc-darker: var(--black-200);
+
+    // Font colors
+    --fc-dark: var(--black-900);
+    --fc-medium: var(--black-700);
+    --fc-light: var(--black-500);
+
+    // Focus rings
+    --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
+    --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
+    --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
+    --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
+
+    // Shadows
+    --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
+    --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
+    --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
+    --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+    
+    // Scrollbars
+    --scrollbar: hsla(0, 0%, 100%, 0.2);
+
+    // Syntax highlighting
+    --highlight-bg: hsl(0, 2%, 11%);
+    --highlight-color: var(--black); // AAA 17.19
+    --highlight-comment: hsl(0, 0%, 60%); // AA 6.03
+    --highlight-punctuation: hsl(0, 0%, 80%); // AAA 10.70
+    --highlight-namespace: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
+    --highlight-attribute: hsl(@powder-h + 2, 41.5%, 67%); // Custom powder blue AAA 7.63
+    --highlight-literal: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
+    --highlight-symbol: hsl(306, 43%, 69%); // Custom purple AAA 7.23
+    --highlight-keyword: hsl(@powder-h + 3, 41.5%, 67%); // Custom powder blue AAA 7.63
+    --highlight-variable: hsl(65.5, 39%, 57.5%);
+    --highlight-addition: var(--green-600); // AAA 8.21
+    --highlight-deletion: var(--red-700); // AA 5.51
+}
+
+.dark-themed-colors() {
+    // Reassemble as a single hsl value
+    --theme-primary-color: .assemble-color(theme-primary-color)[];
+
+    // Reassemble as a single hsl value
+    --theme-secondary-color: .assemble-color(theme-secondary-color)[];
+
+    // Primary Theming
+    --theme-primary-025: .native-darken-desaturate(theme-primary-color, 17, 82)[];
+    --theme-primary-050: .native-darken-desaturate(theme-primary-color, 15, 47)[];
+    --theme-primary-075: .native-darken-desaturate(theme-primary-color, 13, 39)[];
+    --theme-primary-100: .native-darken-desaturate(theme-primary-color, 11, 32)[];
+    --theme-primary-150: .native-darken-desaturate(theme-primary-color, 9, 23)[];
+    --theme-primary-200: .native-darken-desaturate(theme-primary-color, 7, 15)[];
+    --theme-primary-300: .native-darken-desaturate(theme-primary-color, 5, 7)[];
+    --theme-primary-350: var(--theme-primary-color);
+    --theme-primary-400: .native-tint(theme-primary-color, 21)[];
+    --theme-primary-500: .native-tint(theme-primary-color, 36)[];
+    --theme-primary-600: .native-tint(theme-primary-color, 51)[];
+    --theme-primary-700: .native-tint(theme-primary-color, 66)[];
+    --theme-primary-800: .native-tint(theme-primary-color, 81)[];
+    --theme-primary-900: .native-tint(theme-primary-color, 96)[];
+
+    // Secondary Theming
+    --theme-secondary-025: .native-darken-desaturate(theme-secondary-color, 17, 82)[];
+    --theme-secondary-050: .native-darken-desaturate(theme-secondary-color, 15, 47)[];
+    --theme-secondary-075: .native-darken-desaturate(theme-secondary-color, 13, 39)[];
+    --theme-secondary-100: .native-darken-desaturate(theme-secondary-color, 11, 32)[];
+    --theme-secondary-150: .native-darken-desaturate(theme-secondary-color, 9, 23)[];
+    --theme-secondary-200: .native-darken-desaturate(theme-secondary-color, 7, 15)[];
+    --theme-secondary-300: .native-darken-desaturate(theme-secondary-color, 5, 7)[];
+    --theme-secondary-350: var(--theme-secondary-color);
+    --theme-secondary-400: .native-tint(theme-secondary-color, 21)[];
+    --theme-secondary-500: .native-tint(theme-secondary-color, 36)[];
+    --theme-secondary-600: .native-tint(theme-secondary-color, 51)[];
+    --theme-secondary-700: .native-tint(theme-secondary-color, 66)[];
+    --theme-secondary-800: .native-tint(theme-secondary-color, 81)[];
+    --theme-secondary-900: .native-tint(theme-secondary-color, 96)[];
+
+    // Fades
+    --focus-ring: .native-fade(theme-secondary-color, 25)[];
+
+    // TODO
+    --theme-body-font-color: var(--black-800);
+}
+
+// rules shared between .theme-dark and .theme-system w/ prefers-color-scheme: dark
+.theme-dark-rules() {
+    .dark-colors();
+
+    &,
+    & .themed {
+        .generate-themed-variables(theme-dark);
+        // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
+        .dark-themed-colors();
+    }
+
+    & .themed {
+        &:extend(.component-colors);
+    }
+}
+
+//  --  High contrast modes
+.light-highcontrast() {
+    --white: hsl(0, 0%, 100%);
+    --black: hsl(0, 0%, 0%);
+
+    // Black
+    --black-025: hsl(@black-h, @black-s, 97.5%);
+    --black-050: hsl(@black-h, @black-s, 95%);
+    --black-075: hsl(@black-h, @black-s, 92.5%);
+    --black-100: hsl(@black-h, @black-s, 90%);
+    --black-150: hsl(@black-h, @black-s, 87.5%);
+    --black-200: hsl(@black-h, @black-s, 85%);
+    --black-300: hsl(@black-h, @black-s, 35%);
+    --black-350: hsl(@black-h, @black-s, 32.5%);
+    --black-400: hsl(@black-h, @black-s, 30%);
+    --black-500: hsl(@black-h, @black-s, 25%);
+    --black-600: hsl(@black-h, @black-s, 20%);
+    --black-700: hsl(@black-h, @black-s, 15%);
+    --black-750: hsl(@black-h, @black-s, 10%);
+    --black-800: hsl(@black-h, @black-s, 5%);
+    --black-900: hsl(@black-h, @black-s, 0%);
+
+    // Orange
+    --orange-050: hsl(@orange-h, 100%, 97.5%);
+    --orange-100: hsl(@orange-h, 100%, 94%);
+    --orange-200: hsl(@orange-h, 100%, 88%);
+    --orange-300: hsl(@orange-h, 100%, 82%);
+    --orange-400: hsl(@orange-h, 100%, 34%);
+    --orange-500: hsl(@orange-h, 100%, 29%);
+    --orange-600: hsl(@orange-h, 100%, 24%);
+    --orange-700: hsl(@orange-h, 100%, 19%);
+    --orange-800: hsl(@orange-h, 100%, 13%);
+    --orange-900: hsl(@orange-h, 100%, 8%);
+
+    // Blue
+    --blue-050: hsl(@blue-h, 100%, 97.5%);
+    --blue-100: hsl(@blue-h, 100%, 95%);
+    --blue-200: hsl(@blue-h, 100%, 90%);
+    --blue-300: hsl(@blue-h, 100%, 85%);
+    --blue-400: hsl(@blue-h, 100%, 25%);
+    --blue-500: hsl(@blue-h, 100%, 20%);
+    --blue-600: hsl(@blue-h, 100%, 15%);
+    --blue-700: hsl(@blue-h, 100%, 10%);
+    --blue-800: hsl(@blue-h, 100%, 7.5%);
+    --blue-900: hsl(@blue-h, 100%, 5%);
+
+    // Powder
+    --powder-050: hsl(@powder-h, 100%, 97.5%);
+    --powder-100: hsl(@powder-h, 85%, 96%);
+    --powder-200: hsl(@powder-h, 75%, 92%);
+    --powder-300: hsl(@powder-h, 70%, 88%);
+    --powder-400: hsl(@powder-h, 55%, 28%);
+    --powder-500: hsl(@powder-h, 60%, 24%);
+    --powder-600: hsl(@powder-h, 70%, 20%);
+    --powder-700: hsl(@powder-h, 75%, 16%);
+    --powder-800: hsl(@powder-h, 75%, 12%);
+    --powder-900: hsl(@powder-h, 75%, 8%);
+
+    // Green
+    --green-025: hsl(@green-h, 100%, 97%);
+    --green-050: hsl(@green-h, 100%, 96%);
+    --green-100: hsl(@green-h, 100%, 94%);
+    --green-200: hsl(@green-h, 100%, 88%);
+    --green-300: hsl(@green-h, 100%, 82%);
+    --green-400: hsl(@green-h, 100%, 18%);
+    --green-500: hsl(@green-h, 100%, 15%);
+    --green-600: hsl(@green-h, 100%, 12%);
+    --green-700: hsl(@green-h, 100%, 9%);
+    --green-800: hsl(@green-h, 100%, 6%);
+    --green-900: hsl(@green-h, 100%, 3%);
+
+    // Yellow
+    --yellow-050: hsl(@yellow-h, 100%, 95%);
+    --yellow-100: hsl(@yellow-h, 100%, 92%);
+    --yellow-200: hsl(@yellow-h, 95%, 85%);
+    --yellow-300: hsl(@yellow-h, 95%, 78%);
+    --yellow-400: hsl(@yellow-h, 100%, 28%);
+    --yellow-500: hsl(@yellow-h, 100%, 26%);
+    --yellow-600: hsl(@yellow-h, 100%, 23%);
+    --yellow-700: hsl(@yellow-h, 100%, 19%);
+    --yellow-800: hsl(@yellow-h, 100%, 13%);
+    --yellow-900: hsl(@yellow-h, 100%, 7%);
+
+    // Red
+    --red-050: hsl(@red-h, 100%, 97.5%);
+    --red-100: hsl(@red-h, 100%, 95%);
+    --red-200: hsl(@red-h, 100%, 90%);
+    --red-300: hsl(@red-h, 100%, 85%);
+    --red-400: hsl(@red-h, 100%, 35%);
+    --red-500: hsl(@red-h, 100%, 29%);
+    --red-600: hsl(@red-h, 100%, 23%);
+    --red-700: hsl(@red-h, 100%, 17%);
+    --red-800: hsl(@red-h, 100%, 11%);
+    --red-900: hsl(@red-h, 100%, 7%);
+
+    // Gold
+    --gold: hsl(@gold-h, 100%, 50%);
+    --gold-lighter: hsl(@gold-h, 100%, 91%);
+    --gold-darker: hsl(@gold-h - 3, 100%, 20%);
+
+    // Silver
+    --silver: hsl(@silver-h, 6%, 72%);
+    --silver-lighter: hsl(@silver-h, 6%, 91%);
+    --silver-darker: hsl(@silver-h, 6%, 30%);
+
+    // Bronze
+    --bronze: hsl(@bronze-h, 38%, 65%);
+    --bronze-lighter: hsl(@bronze-h, 40%, 92%);
+    --bronze-darker: hsl(@bronze-h, 31%, 25%);
+
+    // Border colors
+    --bc-lightest: var(--black-400);
+    --bc-lighter: var(--black-400);
+    --bc-light: var(--black-400);
+    --bc-medium: var(--black-400);
+    --bc-dark: var(--black-700);
+    --bc-darker: var(--black-900);
+
+    // Font colors
+    --fc-dark: var(--black-900);
+    --fc-medium: var(--black-700);
+    --fc-light: var(--black-500);
+
+    // Focus rings
+    --focus-ring: fade(@blue-600, 90%);
+    --focus-ring-success: fade(@green-600, 90%);
+    --focus-ring-warning: fade(@yellow-600, 90%);
+    --focus-ring-error: fade(@red-600, 90%);
+    --focus-ring-muted: fade(@black-400, 95%);
+
+    // Shadows
+    --bs-sm: none;
+    --bs-md: none;
+    --bs-lg: none;
+    --bs-xl: none;
+
+    // Scrollbars
+    --scrollbar: var(--black);
+
+    // Syntax highlighting
+    --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
+    --highlight-color: var(--black-750);
+    --highlight-comment: hsl(213, 7%, 33%); // Custom black
+    --highlight-punctuation: var(--black-600);
+    --highlight-namespace: hsl(16, 94%, 31%); // Custom orange
+    --highlight-attribute: hsl(215, 100%, 35%); // Custom blue
+    --highlight-literal: hsl(16, 94%, 31%); // Custom orange
+    --highlight-symbol: hsl(309, 45%, 31%); // Custom purple
+    --highlight-keyword: hsl(215, 100%, 35%); // Custom blue
+    --highlight-variable: hsl(88, 100%, 19%); // Custom green
+    --highlight-addition: var(--green-500);
+    --highlight-deletion: var(--red-500);
+
+    // High contrast theme override
+    &:extend(.highcontrast-themed-colors);
+}
+
+.dark-highcontrast() {
+    --white: hsl(0, 0%, 0%);
+    --black: hsl(0, 0%, 100%);
+
+    // Black
+    --black-025: hsl(@black-h, @black-s, 2.5%);
+    --black-050: hsl(@black-h, @black-s, 5%);
+    --black-075: hsl(@black-h, @black-s, 7.5%);
+    --black-100: hsl(@black-h, @black-s, 10%);
+    --black-150: hsl(@black-h, @black-s, 12.5%);
+    --black-200: hsl(@black-h, @black-s, 15%);
+    --black-300: hsl(@black-h, @black-s, 65%);
+    --black-350: hsl(@black-h, @black-s, 67.5%);
+    --black-400: hsl(@black-h, @black-s, 70%);
+    --black-500: hsl(@black-h, @black-s, 75%);
+    --black-600: hsl(@black-h, @black-s, 80%);
+    --black-700: hsl(@black-h, @black-s, 85%);
+    --black-750: hsl(@black-h, @black-s, 90%);
+    --black-800: hsl(@black-h, @black-s, 95%);
+    --black-900: hsl(@black-h, @black-s, 100%);
+
+    // Orange
+    --orange-050: hsl(@orange-h, 100%, 4%);
+    --orange-100: hsl(@orange-h, 100%, 8%);
+    --orange-200: hsl(@orange-h, 100%, 16%);
+    --orange-300: hsl(@orange-h, 100%, 24%);
+    --orange-400: hsl(@orange-h, 100%, 64%);
+    --orange-500: hsl(@orange-h, 100%, 71%);
+    --orange-600: hsl(@orange-h, 100%, 77%);
+    --orange-700: hsl(@orange-h, 100%, 82%);
+    --orange-800: hsl(@orange-h, 100%, 87%);
+    --orange-900: hsl(@orange-h, 100%, 91%);
+
+    // Blue
+    --blue-050: hsl(@blue-h, 100%, 4%);
+    --blue-100: hsl(@blue-h, 100%, 11%);
+    --blue-200: hsl(@blue-h, 100%, 18%);
+    --blue-300: hsl(@blue-h, 100%, 25%);
+    --blue-400: hsl(@blue-h, 100%, 75%);
+    --blue-500: hsl(@blue-h, 100%, 80%);
+    --blue-600: hsl(@blue-h, 100%, 85%);
+    --blue-700: hsl(@blue-h, 100%, 90%);
+    --blue-800: hsl(@blue-h, 100%, 92.5%);
+    --blue-900: hsl(@blue-h, 100%, 95%);
+
+    // Powder
+    --powder-050: hsl(@powder-h, 100%, 6%);
+    --powder-100: hsl(@powder-h, 90%, 8%);
+    --powder-200: hsl(@powder-h, 80%, 14%);
+    --powder-300: hsl(@powder-h, 60%, 20%);
+    --powder-400: hsl(@powder-h, 55%, 72%);
+    --powder-500: hsl(@powder-h, 60%, 76%);
+    --powder-600: hsl(@powder-h, 70%, 80%);
+    --powder-700: hsl(@powder-h, 75%, 84%);
+    --powder-800: hsl(@powder-h, 75%, 88%);
+    --powder-900: hsl(@powder-h, 75%, 92%);
+
+    // Green
+    --green-025: hsl(@green-h, 100%, 3%);
+    --green-050: hsl(@green-h, 100%, 4%);
+    --green-100: hsl(@green-h, 100%, 6%);
+    --green-200: hsl(@green-h, 100%, 12%);
+    --green-300: hsl(@green-h, 100%, 18%);
+    --green-400: hsl(@green-h, 100%, 65%);
+    --green-500: hsl(@green-h, 100%, 71%);
+    --green-600: hsl(@green-h, 100%, 77%);
+    --green-700: hsl(@green-h, 100%, 83%);
+    --green-800: hsl(@green-h, 100%, 89%);
+    --green-900: hsl(@green-h, 100%, 94%);
+
+    // Yellow
+    --yellow-050: hsl(@yellow-h, 100%, 4%);
+    --yellow-100: hsl(@yellow-h, 100%, 8%);
+    --yellow-200: hsl(@yellow-h, 95%, 16%);
+    --yellow-300: hsl(@yellow-h, 95%, 24%);
+    --yellow-400: hsl(@yellow-h, 100%, 55%);
+    --yellow-500: hsl(@yellow-h, 100%, 63%);
+    --yellow-600: hsl(@yellow-h, 100%, 71%);
+    --yellow-700: hsl(@yellow-h, 100%, 79%);
+    --yellow-800: hsl(@yellow-h, 100%, 87%);
+    --yellow-900: hsl(@yellow-h, 100%, 95%);
+
+    // Red
+    --red-050: hsl(@red-h, 100%, 4%);
+    --red-100: hsl(@red-h, 100%, 8%);
+    --red-200: hsl(@red-h, 100%, 16%);
+    --red-300: hsl(@red-h, 100%, 24%);
+    --red-400: hsl(@red-h, 100%, 70%);
+    --red-500: hsl(@red-h, 100%, 75%);
+    --red-600: hsl(@red-h, 100%, 80%);
+    --red-700: hsl(@red-h, 100%, 85%);
+    --red-800: hsl(@red-h, 100%, 90%);
+    --red-900: hsl(@red-h, 100%, 95%);
+
+    // Gold
+    --gold: hsl(@gold-h, 100%, 50%);
+    --gold-lighter: hsl(@gold-h - 3, 100%, 9%);
+    --gold-darker: hsl(@gold-h - 3, 100%, 80%);
+
+    // Silver
+    --silver: hsl(@silver-h, 6%, 72%);
+    --silver-lighter: hsl(@silver-h, 5%, 9%);
+    --silver-darker: hsl(@silver-h, 5%, 70%);
+
+    // Bronze
+    --bronze: hsl(@bronze-h, 38%, 65%);
+    --bronze-lighter: hsl(@bronze-h, 40%, 8%);
+    --bronze-darker: hsl(@bronze-h, 46.7%, 75%);
+
+    // Border colors
+    --bc-lightest: var(--black-400);
+    --bc-lighter: var(--black-400);
+    --bc-light: var(--black-400);
+    --bc-medium: var(--black-400);
+    --bc-dark: var(--black-700);
+    --bc-darker: var(--black-900);
+
+    // Focus rings
+    --focus-ring: fade(@blue-600, 90%);
+    --focus-ring-success: fade(@green-600, 90%);
+    --focus-ring-warning: fade(@yellow-600, 90%);
+    --focus-ring-error: fade(@red-600, 90%);
+    --focus-ring-muted: fade(@black-400, 95%);
+
+    // Font colors
+    --fc-dark: var(--black-900);
+    --fc-medium: var(--black-700);
+    --fc-light: var(--black-500);
+
+    // Shadows
+    --bs-sm: none;
+    --bs-md: none;
+    --bs-lg: none;
+    --bs-xl: none;
+
+    // Scrollbars
+    --scrollbar: var(--black);
+
+    // Syntax highlighting
+    --highlight-bg: hsl(0, 0%, 10%);
+    --highlight-color: hsl(0, 0%, 100%);
+    --highlight-comment: hsl(0, 0%, 99%); // Custom gray
+    --highlight-punctuation: hsl(0, 0%, 99%); // Custom gray
+    --highlight-namespace: hsl(36, 96%, 71%); // Custom orange
+    --highlight-attribute: hsl(200, 57%, 85%); // Custom blue
+    --highlight-literal: hsl(36, 96%, 71%); // Custom orange
+    --highlight-symbol: hsl(304, 39%, 85%); // Custom purple
+    --highlight-keyword: hsl(200, 57%, 85%); // Custom blue
+    --highlight-variable: hsl(62, 71%, 81%); // Custom green
+    --highlight-addition: var(--green-600);
+    --highlight-deletion: var(--red-700);
+
+    // High contrast theme override
+    &:extend(.highcontrast-themed-colors);
+}
+
+.highcontrast-themed-colors {
+    // Primary Theming
+    --theme-primary-color: var(--orange-400);
+    --theme-primary-025: var(--orange-050);
+    --theme-primary-050: var(--orange-050);
+    --theme-primary-075: var(--orange-050);
+    --theme-primary-100: var(--orange-100);
+    --theme-primary-150: var(--orange-100);
+    --theme-primary-200: var(--orange-200);
+    --theme-primary-300: var(--orange-300);
+    --theme-primary-350: var(--orange-300);
+    --theme-primary-400: var(--orange-400);
+    --theme-primary-500: var(--orange-500);
+    --theme-primary-600: var(--orange-600);
+    --theme-primary-700: var(--orange-700);
+    --theme-primary-800: var(--orange-800);
+    --theme-primary-900: var(--orange-900);
+
+    // Secondary Theming
+    --theme-secondary-color: var(--blue-400);
+    --theme-secondary-025: var(--blue-050);
+    --theme-secondary-050: var(--blue-050);
+    --theme-secondary-075: var(--blue-050);
+    --theme-secondary-100: var(--blue-100);
+    --theme-secondary-150: var(--blue-100);
+    --theme-secondary-200: var(--blue-200);
+    --theme-secondary-300: var(--blue-300);
+    --theme-secondary-350: var(--blue-300);
+    --theme-secondary-400: var(--blue-400);
+    --theme-secondary-500: var(--blue-500);
+    --theme-secondary-600: var(--blue-600);
+    --theme-secondary-700: var(--blue-700);
+    --theme-secondary-800: var(--blue-800);
+    --theme-secondary-900: var(--blue-900);
+}
+
+:root {
+    // specify the default colors in less, then deconstruct them
+    // this keeps the hsl/rgb variables below in sync, but consumers will need to set each variable separately
+    @defaultPrimaryColor: @orange;
+    @defaultSecondaryColor: @blue;
+    .generate-calculated-themed-variables(@defaultPrimaryColor, primary);
+    .generate-calculated-themed-variables(@defaultSecondaryColor, secondary);
+}
+
+// place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
+body {
+    &:extend(.component-colors);
+}
+
+// Light mode
+body:not(.theme-dark),
+body.theme-dark .theme-light__forced,
+body.theme-system .theme-light__forced {
+    .light-colors();
+
+    &,
+    & .themed {
+        .generate-themed-variables(theme-light);
+        // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
+        .light-themed-colors();
+    }
+
+    & .themed {
+        &:extend(.component-colors);
+    }
+}
+
+// Dark mode
+body.theme-dark,
+body:not(.theme-dark) .theme-dark__forced {
+    .theme-dark-rules();
+}
+body.theme-system {
+    @media (prefers-color-scheme: dark) {
+        .theme-dark-rules();
+    }
+}
+
+// High contrast mode (Light)
+body.theme-highcontrast:not(.theme-dark),
+body.theme-dark.theme-highcontrast .theme-light__forced,
+body.theme-system.theme-highcontrast .theme-light__forced {
+    .light-highcontrast();
+}
+
+// High contrast mode (Dark)
+body.theme-dark.theme-highcontrast,
+body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
+    .dark-highcontrast();
+}
+body.theme-system.theme-highcontrast {
+    @media (prefers-color-scheme: dark) {
+        .dark-highcontrast();
+    }
+}