/* Block: tldr — scoped */

.tldr-card {
  /* Tokens override per variant below */
  --tldr-bg:      var(--color-cream);
  --tldr-fg:      var(--color-fg-default);
  --tldr-eyebrow: var(--color-red);

  background: var(--tldr-bg);
  color: var(--tldr-fg);
  border-radius: var(--r-lg);
  padding: var(--sp-400) var(--sp-500);
  margin-block: var(--sp-500);
}

.tldr-card[data-variant="cream"] {
  --tldr-bg:      var(--color-cream);
  --tldr-fg:      var(--color-fg-default);
  --tldr-eyebrow: var(--color-red);
}
.tldr-card[data-variant="white"] {
  --tldr-bg:      #ffffff;
  --tldr-fg:      var(--color-fg-default);
  --tldr-eyebrow: var(--color-red);
  box-shadow: var(--shadow-sm);
}
.tldr-card[data-variant="dark"] {
  --tldr-bg:      var(--color-black);
  --tldr-fg:      var(--color-cream);
  --tldr-eyebrow: var(--color-red);
}
.tldr-card[data-variant="red"] {
  --tldr-bg:      var(--color-red);
  --tldr-fg:      #ffffff;
  --tldr-eyebrow: rgb(255 255 255 / 0.9);
}
.tldr-card[data-variant="purple"] {
  --tldr-bg:      var(--color-purple);
  --tldr-fg:      #ffffff;
  --tldr-eyebrow: rgb(255 255 255 / 0.9);
}
.tldr-card[data-variant="blue"] {
  --tldr-bg:      var(--color-blue);
  --tldr-fg:      #ffffff;
  --tldr-eyebrow: rgb(255 255 255 / 0.9);
}

.tldr-card__eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tldr-eyebrow);
  margin-bottom: var(--sp-200);
}

.tldr-card__body {
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--tldr-fg);
}
.tldr-card__body p { margin: 0 0 var(--sp-200); }
.tldr-card__body p:last-child { margin-bottom: 0; }
.tldr-card__body ul,
.tldr-card__body ol {
  margin: var(--sp-200) 0;
  padding-left: 1.25em;
}
.tldr-card__body ul li,
.tldr-card__body ol li {
  position: static;
  padding-left: 0;
  margin-bottom: var(--sp-100);
}
.tldr-card__body ul li::before,
.tldr-card__body ol li::before { content: none; }
.tldr-card__body strong { font-weight: var(--fw-bold); }

/* Links inside the card use the eyebrow accent so they read against any background */
.tldr-card__body a {
  color: var(--tldr-eyebrow);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}