/* Callouts. No left rail here either: the label is a badge from the design system,
   which is how the rest of TechFabric marks a state, and the panel is a plain
   tinted surface. */

blockquote {
  margin-bottom: var(--space-5);
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-strong);
  color: var(--ink-muted);
}

blockquote > p:last-child {
  margin-bottom: 0;
}

.callout {
  --callout-accent: var(--note-accent);
  --callout-surface: var(--note-surface);

  position: relative;
  background: var(--callout-surface);
  border: 1px solid color-mix(in srgb, var(--callout-accent) 22%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  font-size: var(--text-base);
}

/* The badge component: 4px radius, 4px by 12px padding, Inter 600. */
.callout__label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--callout-accent);
  color: var(--sg-text);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

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

.callout--tip {
  --callout-accent: var(--tip-accent);
  --callout-surface: var(--tip-surface);
}

.callout--warning {
  --callout-accent: var(--warning-accent);
  --callout-surface: var(--warning-surface);
}

/* TechFabric's house opinions are the voice of the manual, so they are set apart
   from the informational callouts: an outlined badge on a plain raised surface
   rather than a tinted panel. */
.callout--our-position,
.callout--in-practice {
  --callout-accent: var(--accent);
  background: var(--surface-raised);
  border-color: var(--border);
}

.callout--our-position .callout__label,
.callout--in-practice .callout__label {
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: calc(var(--space-1) - 1px) calc(var(--space-3) - 1px);
}

/* A dark badge label needs dark text on the amber and green fills to stay legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout--warning .callout__label,
  :root:not([data-theme="light"]) .callout--tip .callout__label {
    color: var(--sg-page);
  }
}

:root[data-theme="dark"] .callout--warning .callout__label,
:root[data-theme="dark"] .callout--tip .callout__label {
  color: var(--sg-page);
}