:root {
  --dark-grey: #1A1A1A;
  --light-grey: #626161;
  --white: #FEFEFE;

  /* Mach1 Color Palette */
  --m1yellow: #FFC61E;
  --hl-yellow: #F2FF5F;
  --hl-blue: #14DFBA;
  --hl-green: #38F708;
  --gray-zero: #181818;
  --gray-one: #282828;
  --gray-one-faded: #4E4E4E4E;
  --gray-two: #363636;
  --gray-three: #404040;
  --gray-four: #707070;
  --gray-five: #E4E4E4;
  --gray-six: #18181888;
  --gray-seven: #E5E5E5;
  --off-white: #FBFBFB;
  --new-white: #FAFAFA;
  --v2-yellow: #F3C635;
  
  /* Accent colors - using light grays instead of yellow for most UI elements */
  --accent-light-gray: #999999;
  --accent-medium-gray: #707070;
  --accent-dark-gray: #555555;
  --border-gray: #333333;
  --muted-gray: #888888;
}

html {
    /* Make sure sidebar is wide enough to contain the page title (logo + title + version) */
    --side-nav-fixed-width: 335px;

    /* primary theme color - using light gray instead of yellow for most elements */
    --primary-color: var(--accent-medium-gray);
    --primary-dark-color: var(--accent-dark-gray);
    --primary-light-color: var(--accent-light-gray);
    --primary-lighter-color: #aaaaaa;
    --primary-lightest-color: #cccccc;

    /* page base colors */
    --page-background-color: white;
    --page-foreground-color: #2c3e50;
    --page-secondary-foreground-color: #67727e;

    --border-radius-large: 22px;
    --border-radius-small: 9px;
    --border-radius-medium: 14px;
    --spacing-small: 8px;
    --spacing-medium: 14px;
    --spacing-large: 19px;

    --top-height: 125px;

    --side-nav-background: #d6d7d8;
    --side-nav-foreground: black;
    --header-foreground: var(--side-nav-foreground);
    --searchbar-background: var(--side-nav-foreground);
    --searchbar-border-radius: var(--border-radius-medium);
    --header-background: var(--side-nav-background);
    --header-foreground: var(--side-nav-foreground);

    --toc-background: rgb(243, 240, 252);
    --toc-foreground: var(--page-foreground-color);
}

html.dark-mode {
    color-scheme: dark;

    /* Use light gray as primary, yellow only for interactive hints */
    --primary-color: var(--accent-light-gray);
    --primary-dark-color: var(--accent-medium-gray);
    --primary-light-color: #bbbbbb;
    --primary-lighter-color: #cccccc;
    --primary-lightest-color: #dddddd;

    --page-background-color: #121212;
    --page-foreground-color: #d2dbde;
    --page-secondary-foreground-color: #859399;
    --separator-color: var(--border-gray);
    --side-nav-background: #212223;
    --side-nav-foreground: #F1FDFF;
    --toc-background: #20142C;
    --searchbar-background: var(--page-background-color);
}

/* Custom overrides to reduce yellow usage */
/* Links use subtle yellow only on hover, like the reference theme */
a {
    color: var(--page-foreground-color);
    border-bottom: 1px dotted rgba(153, 153, 153, 0.3);
}

a:hover {
    color: var(--page-foreground-color);
    border-bottom-color: var(--m1yellow);
    text-decoration: none;
}


/* Use gray for borders and dividers instead of yellow */
.navpath,
.tabs,
.tablist,
hr,
.separator {
    border-color: var(--border-gray) !important;
}
}