/* Preview - Shared styles for component preview pages */

body {
  font-family: var(--mdst-font-sans);
  padding: var(--mdst-space-md);
}

.section {
  margin-bottom: var(--mdst-space-lg);
}

.section-header {
  font-size: var(--mdst-text-sm);
  font-weight: 600;
  color: var(--mdst-color-fg);
  margin-bottom: var(--mdst-space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.class-name {
  font-family: var(--mdst-font-mono);
  font-size: var(--mdst-text-sm);
  color: var(--mdst-color-fg);
  background: var(--mdst-color-subtle);
  padding: 0.125em 0.375em;
  border-radius: 2px;
  white-space: nowrap;
}

.class-name .dim {
  opacity: 0.4;
}

.examples {
  display: flex;
  flex-direction: column;
  gap: var(--mdst-space-sm);
  color: var(--mdst-color-fg);
  line-height: var(--mdst-line-height);
}

.footnote {
  font-size: var(--mdst-text-xs);
  line-height: 1.4;
  color: var(--mdst-color-muted);
  margin-top: var(--mdst-space-md);
  padding-top: var(--mdst-space-md);
  border-top: var(--mdst-border-width) solid var(--mdst-color-border);
}

.code-section {
  margin-top: var(--mdst-space-lg);
}

.code-section-header {
  font-size: var(--mdst-text-sm);
  font-weight: 600;
  color: var(--mdst-color-fg);
  margin-bottom: var(--mdst-space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}