.callout {
  padding: 0.75rem 1rem; /* Equivalent to px-4 py-3 */
  margin: 1rem 0; /* Equivalent to my-4 */
  border-width: 1px;
  border-style: solid;
  border-radius: 0.375rem; /* Equivalent to rounded-md */
  font-size: 0.875rem; /* Equivalent to text-sm */
}

/* Define variables for colors (easier maintenance) */
.info {
  --callout-bg: #eff6ff; /* blue-50 */
  --callout-border: #bfdbfe; /* blue-200 */
  --callout-text: #1e40af; /* blue-800 */
}

.warning {
  --callout-bg: #fefce8; /* yellow-50 */
  --callout-border: #fde68a; /* yellow-200 */
  --callout-text: #854d0e; /* yellow-800 */
}

.danger {
  --callout-bg: #fef2f2; /* red-50 */
  --callout-border: #fecaca; /* red-200 */
  --callout-text: #991b1b; /* red-800 */
}

.tip {
  --callout-bg: #f0fdf4; /* green-50 */
  --callout-border: #bbf7d0; /* green-200 */
  --callout-text: #166534; /* green-800 */
}

/* Apply the variables */
.callout {
  background-color: var(--callout-bg);
  border-color: var(--callout-border);
  color: var(--callout-text);
}

/* Optional: Dark mode support */
@media (prefers-color-scheme: dark) {
  .info {
    --callout-bg: rgba(59, 130, 246, 0.1); /* Example dark blue */
    --callout-border: rgba(96, 165, 250, 0.3);
    --callout-text: #93c5fd; /* blue-300 */
  }
  .warning {
    --callout-bg: rgba(234, 179, 8, 0.1);
    --callout-border: rgba(250, 204, 21, 0.3);
    --callout-text: #fde047; /* yellow-300 */
  }
  .danger {
    --callout-bg: rgba(239, 68, 68, 0.1);
    --callout-border: rgba(248, 113, 113, 0.3);
    --callout-text: #fca5a5; /* red-300 */
  }
  .tip {
    --callout-bg: rgba(34, 197, 94, 0.1);
    --callout-border: rgba(74, 222, 128, 0.3);
    --callout-text: #86efac; /* green-300 */
  }
}
