/* Custom color palette based on UI guidelines */
:root {
  /* Primary Colors */
  --accent-color: hsl(200, 100%, 55%);
  --accent-dark: hsl(200, 99%, 32%);
  --accent-light: hsl(200, 100%, 70%);
  --background: hsl(0, 0%, 7%);
  --light-black: hsl(0, 0%, 12%); /* Lighter black for navbar */
  --text: hsl(0, 0%, 84%);
  --white: hsl(0, 0%, 100%);
  --white-2: hsl(0, 0%, 98%);
  --jet: hsl(0, 0%, 22%);
  --onyx: hsl(240, 1%, 17%);
  
  /* Font sizes */
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;
  
  /* Shadows */
  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
  
  /* Transitions */
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;
  
  /* Gradients */
  --gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
  --gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
  --gradient-1: linear-gradient(to bottom right, var(--accent-color) 0%, hsla(36, 100%, 69%, 0) 50%);
  --gradient-2: linear-gradient(135deg, hsla(200, 100%, 55%, 0.25) 0%, transparent 59.86%);
  --text-gradient: linear-gradient(to right, var(--accent-color), var(--accent-light));
}

/* Apply custom theme colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--light-black);
  --md-primary-fg-color--light: var(--light-black);
  --md-primary-fg-color--dark: var(--background);
  --md-accent-fg-color: var(--accent-color);
  --md-default-bg-color: var(--background);
  --md-default-fg-color: var(--text);
  --md-typeset-a-color: var(--accent-color);
  --md-code-bg-color: var(--onyx);
}

/* Navbar styling */
.md-header {
  background-color: var(--light-black);
  color: var(--white);
  box-shadow: var(--shadow-1);
}

/* Navbar text styling */
.md-tabs__link {
  color: var(--white);
  font-weight: 400;
  transition: var(--transition-1);
}

.md-tabs__link:hover {
  color: var(--accent-light);
}

.md-tabs__link--active {
  color: var(--accent-color);
}

.md-tabs__item--active {
  border-bottom: 2px solid var(--accent-color);
}

/* Nav sidebar link styling */
.md-nav__link {
  color: var(--text);
  transition: var(--transition-1);
}

.md-nav__link:hover {
  color: var(--white);
}

.md-nav__link--active {
  color: var(--accent-color);
  font-weight: 500;
}

/* Integrated TOC Styling */
.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav__item {
  padding-left: 0.8rem;
}

.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav__link {
  font-size: inherit;
}

.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav__item--active {
  border-left: 2px solid var(--accent-color);
}

.md-nav--integrated .md-nav__title {
  display: none;
}

.md-nav--integrated > .md-nav__list > .md-nav__item {
  padding-bottom: 0.3rem;
}

/* Typography styling */
.md-typeset h1 {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--white);
}

.md-typeset h2 {
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--white);
}

.md-typeset h3 {
  font-size: var(--fs-3);
  font-weight: 500;
}

.md-typeset p, .md-typeset ul, .md-typeset ol {
  font-size: var(--fs-5);
  font-weight: 300;
}

/* Card styling */
.md-typeset .admonition, .md-typeset details {
  background-color: var(--onyx);
  border-left: 4px solid var(--accent-color);
  box-shadow: var(--shadow-1);
  transition: var(--transition-1);
}

.md-typeset .admonition:hover, .md-typeset details:hover {
  box-shadow: var(--shadow-2);
}

/* Tab styling */
.md-typeset .tabbed-labels > label {
  font-size: var(--fs-6);
  font-weight: 500;
  transition: var(--transition-1);
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--white-2);
}

.md-typeset .tabbed-labels > input:checked + label {
  color: var(--accent-color);
}

/* Button styling */
.md-typeset .md-button {
  background-color: var(--accent-color);
  color: var(--white);
  border-radius: 4px;
  font-weight: 500;
  font-size: var(--fs-6);
  padding: 0.5rem 1rem;
  transition: var(--transition-1);
}

.md-typeset .md-button:hover {
  background-color: var(--accent-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}