/* DS-003: token replacement for the legacy countdown family. */
.countdown {
  display: grid;
  justify-items: center;
  gap: var(--tkc-space-4);
  margin: 0 auto var(--tkc-space-6);
  padding: var(--tkc-space-5) var(--tkc-space-4);
  color: var(--tkc-color-bg);
  background-color: var(--tkc-color-text);
  border-radius: var(--tkc-radius-md);
  box-shadow: var(--tkc-shadow-md);
  text-align: center;
}

.countdown .countdown-label,
.countdown .countdown-topic,
.countdown .countdown-done-msg {
  margin: 0;
  font-family: var(--tkc-font-text);
  font-weight: var(--tkc-weight-bold);
  line-height: var(--tkc-leading-tight);
}

.countdown .countdown-label,
.countdown .countdown-done-msg {
  color: var(--tkc-color-bg);
  font-size: var(--tkc-size-300);
}

/* The countdown is an inverted surface (page color on ink), so the accent is
   tinted toward the page color. The plain accent token is tuned for the page
   background and falls below 4.5:1 here in both appearances. The `.countdown`
   prefix outranks the theme's `.post-excerpt p { font-size: 0.9em }`. */
.countdown .countdown-topic,
.countdown .countdown-word {
  color: color-mix(in srgb, var(--tkc-color-accent) 25%, var(--tkc-color-bg));
  font-size: var(--tkc-size-100);
}

.countdown-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--tkc-space-2);
}

.countdown-unit {
  display: grid;
  justify-items: center;
  min-width: var(--tkc-space-8);
  padding: var(--tkc-space-3);
  background-color: color-mix(in srgb, var(--tkc-color-bg) 12%, transparent);
  border: thin solid color-mix(in srgb, var(--tkc-color-bg) 35%, transparent);
  border-radius: var(--tkc-radius-sm);
}

.countdown-num,
.countdown-sep {
  color: var(--tkc-color-bg);
  font-size: var(--tkc-size-600);
  font-weight: var(--tkc-weight-bold);
  line-height: var(--tkc-leading-tight);
  font-variant-numeric: tabular-nums;
}

.countdown-word {
  margin-top: var(--tkc-space-1);
  font-weight: var(--tkc-weight-medium);
}