@layer components {
  .ui-button,
  .primary-btn,
  .secondary-btn,
  .challenge-join-btn,
  .sm-button-primary,
  .sm-button-secondary,
  .sm-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--sm-radius-button);
    font: 900 var(--sm-type-button) / 1 var(--sm-font);
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .ui-button--primary,
  .primary-btn,
  .challenge-join-btn,
  .sm-button-primary {
    background: var(--sm-brand-lime);
    color: var(--sm-brand-dark);
  }

  .ui-button--secondary,
  .secondary-btn,
  .sm-button-secondary {
    border: 1px solid var(--sm-border-soft);
    background: var(--sm-bg-card);
    color: var(--sm-text-primary);
  }

  .ui-button--danger,
  .sm-button-danger {
    border: 1px solid rgba(217, 67, 53, 0.25);
    background: var(--sm-danger-soft);
    color: var(--sm-danger);
  }

  .ui-card,
  .sm-card {
    border: 1px solid var(--sm-border-soft);
    border-radius: var(--sm-radius-card);
    background: var(--sm-bg-card);
    box-shadow: var(--sm-shadow-card);
  }

  .ui-match-card,
  .challenge-match-card,
  .my-match-card,
  .profile-match-card,
  .match-feed-card {
    border: 1px solid var(--sm-border-soft);
    border-radius: var(--sm-radius-card);
    background: var(--sm-bg-card);
    box-shadow: var(--sm-shadow-card);
  }

  .ui-sheet,
  .sm-sheet {
    box-sizing: border-box;
    width: min(100%, var(--sm-sheet-max));
    max-width: var(--sm-sheet-max);
    margin-inline: auto;
    border-radius: var(--sm-radius-sheet);
    background: var(--sm-bg-card);
  }

  .ui-modal,
  .sm-modal {
    box-sizing: border-box;
    width: min(calc(100% - 32px), var(--sm-dialog-max));
    max-width: var(--sm-dialog-max);
    margin-inline: auto;
    border-radius: var(--sm-radius-card);
    background: var(--sm-bg-card);
  }

  .ui-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: var(--sm-radius-pill);
    border: 1px solid var(--sm-border-soft);
    background: var(--sm-bg-card);
    color: var(--sm-text-primary);
    font: 700 var(--sm-type-meta) / 1 var(--sm-font);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .ui-chip--active {
    border-color: rgba(185, 245, 41, 0.72);
    background: var(--sm-brand-mint-soft);
    color: var(--sm-brand-dark);
  }

  .ui-chip--success {
    background: var(--sm-brand-mint-soft);
    color: var(--sm-brand-green);
  }

  .ui-chip--danger {
    background: var(--sm-danger-soft);
    color: var(--sm-danger);
  }
}