/* ==========================================================================
   MINIMALIST UI/UX CUSTOMIZATIONS
   Designed for a high-contrast, editorial, and clinical feel.
   ========================================================================== */

/* 1. Global Typography: Tighter tracking for a modern SaaS aesthetic */
body, input {
  letter-spacing: -0.01em; 
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}

/* 2. Flat Layout: Remove heavy drop shadows from the header */
.md-header {
  box-shadow: none !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-tabs {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* 3. Light Mode Theme Override (Crisp Black and White) */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #f4f4f5;
  --md-primary-fg-color--dark: #e4e4e7;
  --md-primary-bg-color: #18181b;
  --md-primary-bg-color--light: #27272a;
  
  --md-accent-fg-color: #09090b;
  
  /* Text and Links */
  --md-text-color: #27272a;               /* Zinc-800 instead of stark black for body */
  --md-typeset-a-color: #18181b;          /* Black links */
  --md-typeset-color: #27272a;
  
  /* Code blocks & Code spans */
  --md-code-fg-color: #18181b;
  --md-code-bg-color: #f4f4f5;
}

/* Fix header text visibility when primary background is set to white */
[data-md-color-scheme="default"] .md-header {
  color: #18181b !important;
}
[data-md-color-scheme="default"] .md-header .md-header__button {
  color: #52525b !important;
}
[data-md-color-scheme="default"] .md-header .md-header__button:hover {
  color: #18181b !important;
}
[data-md-color-scheme="default"] .md-tabs__link {
  color: #52525b !important;
}
[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #18181b !important;
}

/* 4. Dark Mode Theme Override (Deep Slate / Zinc) */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #09090b;
  --md-primary-bg-color: #fafafa;
  --md-text-color: #d4d4d8;               /* Zinc-300 */
  --md-typeset-a-color: #ffffff;
  --md-accent-fg-color: #ffffff;
  
  /* Header border for dark mode */
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.1);
}

/* 5. Minimal UI Elements: Admonitions (Callout boxes) */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-admonition-fg-color);
  background-color: transparent !important;
  border-radius: 4px;
  box-shadow: none !important;
}
.md-typeset .admonition-title {
  background-color: transparent !important;
  border-bottom: none !important;
}

/* 6. Minimal UI Elements: Code Blocks */
.md-typeset pre > code {
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none !important;
}

/* 7. Image presentation */
.md-typeset img {
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
}