/*
  Badge, Tag — Website Refresh 2026 1e (Figma), "Badges" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8094-33528

  Requires tokens.css, icons.css to be loaded first. Both Form
  Feature Badge and Form Sector Badge additionally reuse
  .rs-feature-icon (feature.css) at its --36 size, so that needs
  loading too if those two variants are used.

  Badge has 3 types in Figma, originally named "Default" / "Demo
  CTA" / "Demo Sector" — you've since renamed the latter two to Form
  Feature Badge / Form Sector Badge, which is a better name: checking
  the actual page compositions (Features/Conversions, Sector/Museums)
  confirms BOTH sit at the top of the Form CTA card and BOTH are
  genuinely reusable per page, not one reusable + one one-off as
  first assumed here:
    - Form Feature Badge (.rs-badge--form-feature): a single Feature
      Icon + label. Features/Conversions uses wand-sparkles +
      "Automatic conversions"; the generic instance wired into
      content-block.html's Global CTA uses brain-circuit + "Security
      & permissions" — different icon/label per feature page.
    - Form Sector Badge (.rs-badge--form-sector): the fixed RS app
      mark + "+" + a Feature Icon + label. Sector/Museums uses
      landmark + "Museums" — different icon/label per sector page.
  Both keep the same purple-200/purple-700 colour treatment on every
  page, since Form CTA's own background is always a fixed Purple/700
  — only the icon + label are swapped, by hand, per page instance
  (there's no JS/data-driving here, just editing the markup).

  Tag's Default/Hover/Active map onto plain CSS :hover/:active
  (no .is-current class needed) — unlike some other components in
  this system, Figma's own naming here matches ordinary mouse-state
  behaviour with no evidence of a separate persistent "selected"
  meaning.
*/

/* ---------- Badge ---------- */

.rs-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--space-4);
}

.rs-badge--default {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-neutral-300);
}

.rs-badge__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.rs-badge--default .rs-badge__label {
  font-size: 14px;
  color: var(--color-neutral-900);
}

.rs-badge--form {
  gap: var(--space-6);
}

.rs-badge--form .rs-badge__label {
  font-size: 16px;
}

.rs-badge--form-feature .rs-badge__label,
.rs-badge--form-sector .rs-badge__label {
  color: var(--color-purple-200);
}

.rs-badge__icon {
  border-radius: var(--space-6);
}

.rs-badge--form-feature .rs-badge__icon,
.rs-badge--form-sector .rs-badge__icon {
  background-color: var(--color-purple-200);
}

.rs-badge--form-feature .rs-badge__icon .rs-icon,
.rs-badge--form-sector .rs-badge__icon .rs-icon {
  color: var(--color-purple-700);
}

.rs-badge__mark {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.rs-badge__plus {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-purple-200);
}

/* ---------- Tag ---------- */

.rs-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-12);
  border: none;
  border-radius: var(--space-48);
  background-color: var(--color-neutral-200);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--color-neutral-900);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rs-tag:hover {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-white-50);
}

.rs-tag:active {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-white-50);
}