docs/src/components/InfoBox.module.css
.infoBox {
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  border-left: 4px solid;
  background-color: var(--ifm-color-emphasis-100);
}

.title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content {
  line-height: 1.6;
}

.content p:last-child {
  margin-bottom: 0;
}

/* Info variant */
.info {
  border-left-color: var(--ifm-color-info);
  background-color: var(--ifm-color-info-contrast-background);
}

.info .title {
  color: var(--ifm-color-info-dark);
}

/* Tip variant */
.tip {
  border-left-color: var(--ifm-color-success);
  background-color: var(--ifm-color-success-contrast-background);
}

.tip .title {
  color: var(--ifm-color-success-dark);
}

/* Warning variant */
.warning {
  border-left-color: var(--ifm-color-warning);
  background-color: var(--ifm-color-warning-contrast-background);
}

.warning .title {
  color: var(--ifm-color-warning-dark);
}

/* Example variant */
.example {
  border-left-color: var(--ifm-color-primary);
  background-color: var(--ifm-color-primary-contrast-background);
}

.example .title {
  color: var(--ifm-color-primary-dark);
}

/* Note variant */
.note {
  border-left-color: var(--ifm-color-secondary);
  background-color: var(--ifm-color-secondary-contrast-background);
}

.note .title {
  color: var(--ifm-color-secondary-dark);
}

/* Dark mode adjustments */
[data-theme='dark'] .infoBox {
  background-color: var(--ifm-background-color);
  border-left-width: 3px;
}

[data-theme='dark'] .info {
  background-color: rgba(84, 199, 236, 0.1);
}

[data-theme='dark'] .tip {
  background-color: rgba(0, 210, 144, 0.1);
}

[data-theme='dark'] .warning {
  background-color: rgba(255, 186, 0, 0.1);
}

[data-theme='dark'] .example {
  background-color: rgba(37, 194, 160, 0.1);
}

[data-theme='dark'] .note {
  background-color: rgba(178, 178, 178, 0.1);
} 