/* ==========================================================================
   Tag — Carbon tag
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  min-height: 1.5rem;
  padding: 0 var(--cds-spacing-03);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

.tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.tag--live {
  background: var(--cds-green-10);
  color: var(--cds-green-60);
}

.tag--beta {
  background: var(--cds-blue-10);
  color: var(--cds-blue-70);
}

.tag--coming-soon {
  background: var(--cds-gray-20);
  color: var(--cds-gray-70);
}

.tag--blue {
  background: var(--cds-blue-10);
  color: var(--cds-blue-70);
}

.tag--green {
  background: var(--cds-green-10);
  color: var(--cds-green-60);
}

.tag--red {
  background: var(--cds-red-10);
  color: var(--cds-red-60);
}

.tag--yellow {
  background: var(--cds-yellow-10);
  color: var(--cds-yellow-60);
}

.tag--purple {
  background: var(--cds-purple-10);
  color: var(--cds-purple-60);
}

.tag--cyan {
  background: var(--cds-cyan-10);
  color: var(--cds-cyan-60);
}

.tag--gray {
  background: var(--cds-gray-20);
  color: var(--cds-gray-70);
}

.tag--plain::before {
  display: none;
}

/* Dark theme (set by core/theme-boot.js and the light/dark switch) */
:root[data-theme="dark"] .tag--live,
:root[data-theme="dark"] .tag--green {
  background: #044317;
  color: var(--cds-green-40);
}
:root[data-theme="dark"] .tag--beta,
:root[data-theme="dark"] .tag--blue {
  background: var(--cds-blue-80);
  color: var(--cds-blue-20);
}
:root[data-theme="dark"] .tag--coming-soon,
:root[data-theme="dark"] .tag--gray {
  background: var(--cds-gray-80);
  color: var(--cds-gray-30);
}
:root[data-theme="dark"] .tag--red {
  background: #750e13;
  color: #ffb3b8;
}
:root[data-theme="dark"] .tag--yellow {
  background: #483700;
  color: #fddc69;
}
:root[data-theme="dark"] .tag--purple {
  background: #491d8b;
  color: #e8daff;
}
:root[data-theme="dark"] .tag--cyan {
  background: #003a6d;
  color: #bae6ff;
}


/* Content badge ------------------------------------------------------------
   A small coloured label set in the admin on a lesson ("Special", "New", …) or on a
   topic. Rendered by components/badge.js; used in lesson lists and headers, on the
   topic tiles of the home page and next to the topic hub title. Lives here because
   tag.css is loaded on every page. */
.lesson-badge {
  display: inline-block;
  margin-inline-start: 0.5em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

/* Inside a tile header the meta row already spaces its items; match the "NEW" chip's scale. */
.tile__meta .lesson-badge {
  margin-inline-start: 0;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  border-radius: 0;
  padding: 0.125rem 0.375rem;
}

/* Next to a big page title, scale the chip down relative to the heading. */
.page-hero__title .lesson-badge {
  font-size: 0.4em;
  vertical-align: 0.35em;
  letter-spacing: 0.08em;
}

.lesson-badge--new {
  background: rgba(36, 161, 72, 0.16);
  color: #198038;
}
.lesson-badge--updated {
  background: rgba(15, 98, 254, 0.16);
  color: #0f62fe;
}
.lesson-badge--popular {
  background: rgba(138, 63, 252, 0.16);
  color: #8a3ffc;
}
.lesson-badge--advanced {
  background: rgba(218, 30, 40, 0.16);
  color: #da1e28;
}
.lesson-badge--free {
  background: rgba(0, 125, 125, 0.16);
  color: #007d79;
}
/* Special stands out: a filled brand-red pill. */
.lesson-badge--special {
  background: var(--cds-interactive);
  color: #ffffff;
  letter-spacing: 0.06em;
}

/* Brighten text tones for dark mode so the labels stay legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-badge--new { color: #42be65; }
  :root:not([data-theme="light"]) .lesson-badge--updated { color: #78a9ff; }
  :root:not([data-theme="light"]) .lesson-badge--popular { color: #be95ff; }
  :root:not([data-theme="light"]) .lesson-badge--advanced { color: #ff8389; }
  :root:not([data-theme="light"]) .lesson-badge--free { color: #3ddbd9; }
}
:root[data-theme="dark"] .lesson-badge--new { color: #42be65; }
:root[data-theme="dark"] .lesson-badge--updated { color: #78a9ff; }
:root[data-theme="dark"] .lesson-badge--popular { color: #be95ff; }
:root[data-theme="dark"] .lesson-badge--advanced { color: #ff8389; }
:root[data-theme="dark"] .lesson-badge--free { color: #3ddbd9; }