/* Hytale Server Manager theme - Pink/magenta hue from hsm-icon.svg (#FFC7EF) */

:root {
  /* Light mode overrides */
  --md-primary-fg-color: hsl(317, 99%, 75%);        /* Pink/magenta for light mode (#FFC7EF base) */
  --md-primary-fg-color--light: hsl(317, 100%, 94%); /* Light pink (#FFF5FC) */
  --md-primary-fg-color--dark: hsl(317, 79%, 40%);  /* Dark pink (#B8459F) */
  --md-accent-fg-color: hsl(317, 100%, 79%);         /* Bright pink for accents (#FFD4F5) */
  --md-typeset-a-color: hsl(317, 100%, 79%);         /* Links use accent pink in light mode */
}

[data-md-color-scheme="slate"] {
  /* Dark mode */

  /* Header/Navbar - dark pink/magenta-tinted background */
  --md-primary-fg-color: hsl(317, 35%, 8%);         /* Dark pink-tinted background (#1A0F17) */
  --md-primary-fg-color--light: hsl(317, 85%, 89%); /* Light pink (#FFE5F7) */
  --md-primary-fg-color--dark: hsl(317, 20%, 5%);  /* Very dark pink (#120A10) */
  --md-primary-bg-color: hsl(317, 25%, 90%);        /* Light pink-gray (#F5E6F0) */

  /* Accent - bright pink for links, buttons, active states */
  --md-accent-fg-color: hsl(317, 100%, 79%);         /* Bright pink primary (#FFD4F5) */
  --md-accent-fg-color--transparent: hsla(317, 100%, 79%, 0.1);

  /* Background colors with pink/magenta hue */
  --md-default-bg-color: hsl(317, 35%, 8%);         /* Pink-tinted dark background (#1A0F17) */
  --md-default-fg-color: hsl(317, 25%, 90%);        /* Text primary (#F5E6F0) */
  --md-default-fg-color--light: hsl(317, 20%, 76%); /* Text secondary (#D0C4CA) */

  /* Code block colors with pink/magenta hue */
  --md-code-bg-color: hsl(317, 33%, 14%);           /* Pink-tinted code background (#2A1F25) */
  --md-code-fg-color: hsl(317, 25%, 90%);           /* #F5E6F0 */

  /* Links - use bright pink */
  --md-typeset-a-color: hsl(317, 100%, 79%);         /* #FFD4F5 */

  /* Table of contents active item */
  --md-typeset-table-color: hsl(317, 33%, 14%);     /* #2A1F25 */
}

/* Enhanced pink/magenta highlights for dark mode */
[data-md-color-scheme="slate"] {
  /* Sidebar active nav item */
  .md-nav__link--active {
    color: hsl(317, 100%, 79%) !important; /* #FFD4F5 */
  }

  /* Hover states */
  .md-nav__link:hover {
    color: hsl(317, 85%, 89%) !important; /* Light pink */
  }

  /* Search highlights */
  .md-search-result__meta {
    background-color: hsl(317, 33%, 14%);
  }

  /* Admonition headers */
  .md-typeset .admonition-title {
    background-color: hsla(317, 100%, 79%, 0.1);
  }
}

/* Rounded corners and colors to match project */
.md-button {
  border-radius: 44px !important;        /* Match project button radius */
}

/* Primary button - filled pink/magenta */
.md-button--primary {
  background-color: hsl(317, 99%, 75%) !important; /* #FFC7EF */
  color: white !important;
  border-color: hsl(317, 99%, 75%) !important;     /* #FFC7EF */
}

.md-button--primary:hover {
  background-color: hsl(317, 100%, 79%) !important; /* #FFD4F5 */
  border-color: hsl(317, 100%, 79%) !important;     /* #FFD4F5 */
}

[data-md-color-scheme="slate"] .md-button--primary {
  background-color: hsl(317, 100%, 79%) !important; /* #FFD4F5 */
  color: hsl(317, 35%, 8%) !important;             /* #1A0F17 */
  border-color: hsl(317, 100%, 79%) !important;     /* #FFD4F5 */
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
  background-color: transparent !important;
  color: hsl(317, 100%, 79%) !important;            /* #FFD4F5 */
  border-color: hsl(317, 100%, 79%) !important;     /* #FFD4F5 */
}

/* Secondary button - outlined pink/magenta */
.md-button:not(.md-button--primary) {
  color: hsl(317, 99%, 75%) !important;            /* #FFC7EF */
  border-color: hsl(317, 99%, 75%) !important;     /* #FFC7EF */
}

.md-button:not(.md-button--primary):hover {
  background-color: hsla(317, 100%, 79%, 0.1) !important;
  border-color: hsl(317, 100%, 79%) !important;     /* #FFD4F5 */
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
  color: hsl(317, 100%, 79%) !important;            /* #FFD4F5 */
  border-color: hsl(317, 100%, 79%) !important;     /* #FFD4F5 */
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary):hover {
  background-color: hsla(317, 100%, 79%, 0.1) !important;
  border-color: hsl(317, 85%, 89%) !important;     /* Light pink */
}

/* Additional pink/magenta-tinted backgrounds */
[data-md-color-scheme="slate"] .md-header {
  background-color: hsl(317, 35%, 8%);             /* #1A0F17 */
}

/* Logo styling */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
}

/* Clean separator between header and content */
[data-md-color-scheme="slate"] .md-header {
  box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2);
}

/* Improve sidebar appearance */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: transparent;
}

/* Better content cards */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border: none;
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.05), 0 0 0.05rem rgba(0,0,0,.1);
}

/* Tabs styling */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: hsl(317, 35%, 8%);             /* #1A0F17 */
  border-bottom: 0.05rem solid hsla(317, 100%, 79%, 0.1);
}

/* Code blocks with subtle borders */
[data-md-color-scheme="slate"] .md-typeset pre > code {
  border-radius: 0.5rem;
}

/* Navigation path breadcrumbs */
[data-md-color-scheme="slate"] .md-path {
  color: hsl(317, 20%, 76%);                       /* #D0C4CA */
}

/* Admonition styling to match mkdocs-material style */
/* Border-left style like the reference documentation */
.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-left-width: 4px;
}

/* Only content links (markdown content) use accent color - exclude nav, buttons, etc. */
.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-header__button):not(.md-footer__link):not(.md-search-result__link) {
  color: hsl(317, 100%, 79%) !important;            /* #FFD4F5 */
}

.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-header__button):not(.md-footer__link):not(.md-search-result__link):hover {
  color: hsl(317, 100%, 79%) !important;            /* #FFD4F5 */
  opacity: 0.8;
}