:root {
  /* dark palette */
  --callout-radius: 8px;
  --callout-padding: 0.75rem 1rem;
  --callout-border: 4px;
  --callout-title-bg: #1d2027;  /* default title bg (used if no type) */
  --callout-bg: #15161a;        /* default body bg (used if no type) */
  --callout-text: #e9e9ec;
  --c-note: #7ab0ff; --c-warning: #e3b341; --c-danger: #ff7b72;
  --c-info: #58a6ff; --c-success: #3fb950; --c-quote: #8b949e;
}

.callout {
  margin: 1rem 0;
  border-left: var(--callout-border) solid var(--c-note);
  border-radius: var(--callout-radius);
  background: var(--callout-bg);
  color: var(--callout-text);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.callout-title {
  display: flex; align-items: center; gap: .5rem;
  padding: var(--callout-padding);
  background: var(--callout-title-bg);
  font-weight: 600;
}
.callout-title-text { line-height: 1.2; }
.callout-body { padding: var(--callout-padding); }
.callout-toggle {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font: inherit; line-height: 1; padding: .15rem .35rem; border-radius: 6px;
}
.callout.is-collapsed .callout-body { display: none; }
.callout.is-collapsed .callout-toggle { transform: rotate(-90deg); }

/* Type colors: keep left border AND tint each callout’s backgrounds */
.callout-note     { border-left-color: var(--c-note);    background: rgba(122,176,255,0.12); }
.callout-note .callout-title { background: rgba(122,176,255,0.18); }

.callout-info     { border-left-color: var(--c-info);    background: rgba(88,166,255,0.12); }
.callout-info .callout-title { background: rgba(88,166,255,0.18); }

.callout-tip,
.callout-success  { border-left-color: var(--c-success); background: rgba(63,185,80,0.12); }
.callout-tip .callout-title,
.callout-success .callout-title { background: rgba(63,185,80,0.18); }

.callout-warning  { border-left-color: var(--c-warning); background: rgba(227,179,65,0.14); }
.callout-warning .callout-title { background: rgba(227,179,65,0.20); }

.callout-danger   { border-left-color: var(--c-danger);  background: rgba(255,123,114,0.12); }
.callout-danger .callout-title { background: rgba(255,123,114,0.18); }

.callout-quote    { border-left-color: var(--c-quote);   background: rgba(139,148,158,0.12); }
.callout-quote .callout-title { background: rgba(139,148,158,0.18); }